如果至少选中了一个复选框，则未禁用按钮答案

【问题标题】：Undisabled button if at least one checkbox were checked如果至少选中了一个复选框，则未禁用按钮
【发布时间】：2018-02-17 14:05:35
【问题描述】：

我有如下代码：

$('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)   
      }
      });
     })

<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 个复选框中的 1 个（至少选中了一个复选框），我希望取消禁用带有 id="delete_all_vm" 的按钮，因此当有一个复选框至少选中一个时，它将取消禁用按钮 @987654325 @。我怎样才能做到这一点？

【问题讨论】：

你可以使用if($('.chuis').is(':checked')){
可能你会找到你的答案here 并且可能重复。

标签： javascript jquery

【解决方案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() 值，这样就根本不需要if 条件。

$('.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>

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

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

【讨论】：

@Gagantous 非常欢迎你。我已经更新了答案以包含第二种方法，它稍微小一些，我认为使用/解决看起来更简单。

【解决方案2】：

在您的each 函数中，您正在遍历所有输入元素，如果选中了某个项目，您将禁用或启用按钮上的 disabled 属性。如果检查最后一个输入，这只会像您期望的那样工作。如果第一个 1 输入被选中但最后一个没有被选中怎么办？该功能将首先启用按钮，然后当它到达最后一个输入时，它将禁用它。所以我认为你需要做的就是：

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

【讨论】：

【解决方案3】：

你也可以不使用 JQuery 来做到这一点。

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;
  };
}

<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>

【讨论】：

【解决方案4】：

获取所有勾选的复选框，如果不为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>

【讨论】：

【解决方案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>

试试这个代码，如果它工作正常，请告诉我。

【讨论】：