按类别的复选框全部选中答案

【问题标题】：Checkboxes by class all selected按类别的复选框全部选中
【发布时间】：2017-08-09 19:14:40
【问题描述】：

我有一个动态的复选框列表，它们都具有相同的类。我想禁用提交按钮，直到选中“group1”类中的所有复选框。

我也只想这样做，当这个类出现在页面上时。我就是这样做的：

<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group1" value="14" />

if ($(".group1").length > 0) {
 //run below code
 }

所以我是这样开始的，但不确定如何知道何时，该类的所有复选框都被选中。

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {

    var checkboxes = $('.group1');
       if($(this).is(':checked')) {
           //if all chekced, enable submit button
           $(':input[type="submit"]').prop('disabled', false);
       } else {
        $(':input[type="submit"]').prop('disabled', true);
       }

    }
  });
});

我看过这个jQuery Array of all selected checkboxes (by class)，但是由于这个类可以是任意长度，我不知道如何检查是否全部被选中。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

最简单的方法是将复选框的总数与选中的数量进行比较，如下所示：

var $group = $('.group1');
$(':input[type="submit"]').prop('disabled', $group.length != $group.filter(':checked').length);

【讨论】：

【解决方案2】：

您可以像这样简单地检查复选框的总数和选中的复选框的总数：

if ($('.group1').length == $('.group1:checked').length) {
  // all are checked...
  $(':input[type="submit"]').prop('disabled', false);
} else {
  $(':input[type="submit"]').prop('disabled', true);
}

【讨论】：

【解决方案3】：

var selected = $(".group1:checked").length;

计算被选中的复选框。

【讨论】：

您能否扩展它以显示它如何帮助 OP？这似乎是一半的答案
我认为 Blawless 有 80% 的答案，只有一小部分缺失。你的回答看起来很聪明......

【解决方案4】：

首先，您需要将一个事件绑定到复选框，以在它们每次更改状态时重新运行检查以启用或禁用按钮；

然后您可以检查是否所有复选框都被选中，比较您的组的长度与:checked 伪选择器过滤的组的长度

要更改提交按钮的状态，您可以使用.prop 方法，该方法接受一个属性和该属性的状态作为第二个参数。所以：

$group1 = $(".group1");
$submit = $('[type=submit]');
if ($group1.length > 0) {
    $group1.on('change', checkBoxes)
}

function checkBoxes(){
    var $checked = $group1.filter(':checked'); 
    $submit.prop('disabled', $group1.length != $checked.length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group1" value="14" />
<input type="submit" disabled>

【讨论】：