javascript - 如何选择所有/取消选择所有未禁用的复选框？

Question

我有多个复选框输入，但其中一些被禁用。因此，当我单击全选/取消选中顶部的所有复选框时，我想将此事件应用于唯一启用的复选框。此外，当我通过单击每个复选框选中所有复选框时，必须单击全选复选框。

注意:我还有一项功能，当启用的复选框被点击并随后点击保存时，那个特定的复选框将被禁用。我可以使用添加新复选框添加一个新的复选框按钮。添加新复选框时，必须取消选中全选/取消全选复选框。

HTML

<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
  </tr>
</table>
<button id="add">
  Add check box
</button>
<button id="save">
  Save
</button>

JQuery

$(document).ready(function() {
  $("#ckbCheckAll").click(function() {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
  });
});
$(document).ready(function() {
  $('.checkBoxClass').click(function() {
    var selected = $('.checkBoxClass').length;
    if ($('.checkBoxClass:checked:enabled').length === selected) {
      $('#ckbCheckAll').prop('checked', true);
    } else {
      $('#ckbCheckAll').prop('checked', false);
    }
  })
});
$(document).ready(function() {
  count = 5;
  $('#save').click(function() {
    $('.checkBoxClass').each(function() {
      if ($(this).is(':checked')) {
        $(this).prop('disabled', true);
      }
    })
  });
  $('#add').click(function() {
    count = count + 1;
    $('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
  });
})

Fiddle

Answer 1

要检测禁用的复选框，您可以使用 jquery filter 方法，如下所示:

$(".checkBoxClass").filter(function(){
    return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));

通过像这样使用filter，JQuery 更改没有禁用属性的复选框。

并使用 .prop('checked', false) 或 .attr('checked', false) 在添加新复选框按钮时取消选中复选框。

因此取消选中保存时全选并添加复选框使用:

$("#ckbCheckAll").attr('checked', false);

并取消选中 addcheckbox 上所有启用的复选框，使用:

$(".checkBoxClass").filter(function(){
    return !$(this).attr('disabled');
}).prop('checked', false);

您还应该使用 $(document).on("click",".checkBoxClass",function(){}) binder 让 JQuery 绑定(bind) click 事件用于动态添加的复选框。通过这样做并添加一些额外的 jquery，选中所有复选框，选中所有复选框时选中。

Updated Fiddle