如何检测是否选中了复选框中的任何内容？答案

【问题标题】：How can I detect if anything in my checkbox is selected?如何检测是否选中了复选框中的任何内容？
【发布时间】：2016-06-04 01:07:17
【问题描述】：

如果选中任何复选框，我想启用该按钮。否则，如果没有选中，我想禁用该按钮。

jQuery

	$(document).ready(function() {
  $('.check_list').change(function() {
    if ($(".check_list input:checkbox:checked").length > 0){
      $(".btn").attr('disabled','disabled');
    } else {
      $(".btn").removeAttr('disabled');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">

<button class="btn" disabled> Button</button>

当我检查按钮时它工作。但是当我取消选中所有内容时，它仍然处于启用状态。但它应该被禁用

【问题讨论】：

我认为你的 if 语句是相反的；不应该是如果检查了什么，启用按钮，否则如果没有检查禁用按钮？
你想要this吗？
@KartikeyaKhosla Oriol 的答案正是我想要的:)

标签： jquery checkbox

【解决方案1】：

您的 CSS 选择器错误。并使用prop 而不是attr，除非您知道自己在做什么。

var $checklist = $('.check_list').change(function() {
  $(".btn").prop('disabled', !$checklist.is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">
<button class="btn" disabled> Button</button>

【讨论】：

【解决方案2】：

您的 JS 代码中有两个问题。第一个是选择器，第二个是您尝试更改禁用属性的方式，您应该使用prop。

$('.check_list').change(function() {
  if ($('.check_list:checked').length > 0) {
    $('.btn').prop('disabled', false);
  } else {
    $('.btn').prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">

<button class="btn" disabled> Button</button>

【讨论】：

【解决方案3】：

看来你需要

使用属性（而不是属性）
调整您的选择器

参见下面的代码示例

$(document).ready(function() {
  // init button
  $(".btn").prop('disabled', true);

  $('.check_list').change(function() {
    var numOfCheckedBoxes=0;
    $.each($(".check_list"), function(i, v) {
      
      if ($(v).is(":checked")) {
        numOfCheckedBoxes++;
      }
    });
    
    
    $(".btn").prop('disabled', (numOfCheckedBoxes==0));

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check_list" name="check_list[]" value="value1">
<input type="checkbox" class="check_list" name="check_list[]" value="value2">
<input type="checkbox" class="check_list" name="check_list[]" value="value3">
<input type="checkbox" class="check_list" name="check_list[]" value="value4">


<button class="btn">Button</button>

【讨论】：