Question

我有一个如下代码：

＆＃13;

$('input[type=checkbox]').click(function(event) {
      $('.chuis').each(function() {
     	if(this.checked) {
          $('#delete_all_vm').prop("disabled",false);   
      }
      else {
          $('#delete_all_vm').prop("disabled",true)   
      }
      });
     })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox"  />
<button id="delete_all_vm" disabled="disabled">Click me!</button>

＆＃13;

如果选中5个复选框（我们至少选中了一个复选框），我希望id="delete_all_vm"按钮取消禁用，所以当有一个复选框时，至少有一个复选框被选中，它将无法按下该按钮id="delete_all_vm"。我怎样才能做到这一点？

Answer 1

你几乎拥有它，但你不需要遍历这些元素。

将此用作if条件。 $('.chuis').is(':checked')

$('input[type=checkbox]').click(function(event) {
  if ($('.chuis').is(':checked')) {
    $('#delete_all_vm').prop("disabled", false);
  } else {
    $('#delete_all_vm').prop("disabled", true)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<button id="delete_all_vm" disabled="disabled">Click me!</button>

更新：可选方法。

如果您想将源代码缩减一点，可以使用!$('.chuis').is(':checked')设置.prop()值，如果根本不需要条件则不会。

$('.chuis').click(function(){
  $('#delete_all_vm').prop("disabled", !$('.chuis').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="chuis" type="checkbox"/>
<input class="chuis" type="checkbox"/>
<input class="chuis" type="checkbox"/>
<input class="chuis" type="checkbox"/>
<input class="chuis" type="checkbox"/>
<button id="delete_all_vm" disabled="disabled">Click me!</button>

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 2

获取所有已选中的复选框，如果不是0，则启用。

建议使用班级.chuis代替input[type=checkbox]作为选择器

$(document).ready(function() {
  $(".chuis").click(function() {
   
    //Get the number of checked checkbox
    var num = $(".chuis:checked").length;

    //Check if number is not 0, enable the btn
    if (num !== 0) {
      $('#delete_all_vm').prop("disabled", false);
    } else {
      $('#delete_all_vm').prop("disabled", true);
    }

  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox" />
<button id="delete_all_vm" disabled="disabled">Click me!</button>

Answer 3

在each函数中，您正在迭代所有输入元素，如果选中了某个项目，则表示您要禁用或启用按钮上的已禁用道具。这只会在检查最后一个输入时按预期工作。如果检查前1个输入但是最后一个输入不是怎么办？该函数将首先启用按钮，然后当它到达最后一个输入时它将禁用它。所以我认为你需要做的就是：

 $('input[type=checkbox]').click(function(event) {
      $('.chuis').each(function() {
         if(this.checked) {
           $('#delete_all_vm').prop("disabled", false);   
        }
      });
    });

Answer 4

你也可以在不使用JQuery的情况下完成它。

＆＃13;

var checkboxes = document.getElementsByClassName("chuis");
var btn = document.getElementById("delete_all_vm");
var len = checkboxes.length;
var checkCounter = 0;

while(len--) {
  var chkbox = checkboxes[len];
  chkbox.onchange = function() {
    checkCounter += this.checked ? 1 : -1;
    btn.disabled = checkCounter === 0 ? true : false;
  };
}

＆＃13;

<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox"  />
<button id="delete_all_vm" disabled="disabled">Click me!</button>

＆＃13;

Answer 5

$('input[type=checkbox]').click(function(event) {
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
       var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
      
     	if(!checkedOne ) {
          $('#delete_all_vm').prop("disabled",true);   
      }
      else {
          $('#delete_all_vm').prop("disabled",false)   
      }
      
     })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox" />
<input class="chuis" type="checkbox"  />
<input class="chuis" type="checkbox"  />
<button id="delete_all_vm" disabled="disabled">Click me!</button>

试试这段代码，如果运行正常，请告诉我。

如果至少选中了一个复选框，则无法使用按钮

5 个答案: