Question

我有一个动态的复选框列表，所有复选框都有相同的类。我想禁用提交按钮，直到选中“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)，但由于班级可以是任何长度，我不知道如何检查所有都被选中。

Answer 1

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

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

Answer 2

您可以像这样检查，复选框的总数和已选中复选框的总数：

window.setInterval(function(){
  var x = 0;
  $("button:contains('Follow')").each(function(){ 
    if($(this).text()=="Follow"){
      if(x==2) return false; 
      $(this).trigger("click");
      if(typeof $('._4gt3b')[0] !== 'undefined'){
        $('._4gt3b').scrollTop($('._4gt3b')[0].scrollHeight);
      }
      x++;
    }
  });
  if(typeof $('._4gt3b')[0] !== 'undefined'){
    $('._4gt3b').scrollTop($('._4gt3b')[0].scrollHeight);
  }
  console.log('loop');
}, 70000);

Answer 3

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

计算已选中的复选框。

Answer 4

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

按类选中复选框

4 个答案: