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

【问题标题】：How to select all/unselect all the check boxes which are not disabled?如何选择所有/取消选择所有未禁用的复选框？
【发布时间】：2016-11-06 20:59:21
【问题描述】：

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

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

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

【问题讨论】：

复选框的数量是可变的吗？如果没有，您可以添加到每个 'id 并测试它们是否已启用并设置 selected=true。
@FDavidov 是的，它们是可变的。我可以使用添加按钮添加。
$(".checkBoxClass").not(':disabled').prop('checked', $(this).prop('checked'));你可以用这个。
Hummm... 然后你需要做一些循环（JQuery）检查部署的复选框。尽管如此，我还是建议您为每个人添加一个 ID（一个数字，例如“checkbox_1”、“checkbox_2”……）。

标签： javascript jquery html checkbox dynamic-content

【解决方案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 绑定 click 事件以动态添加复选框。通过这样做并添加一些额外的 jquery，选择所有复选框，当所有复选框都被选中时检查。

Updated Fiddle

【讨论】：

谢谢。工作正常。但有几个问题。
当所有复选框都被选中并禁用时，我希望全选被选中并禁用。否则不使用该复选框。然后当我添加一个新的复选框时，必须启用和取消选中全选。
添加一个新的复选框选择所有复选框，然后按保存。现在再添加一个复选框，尝试选择它，然后您观察到全选复选框未选中

【解决方案2】：

试试这个，它只会启用复选框并选择/取消选择它们。

$(document).ready(function() {
  $("#ckbCheckAll").click(function() {
    $(".checkBoxClass:enabled").prop('checked', $(this).checked);
  });
});

检查小提琴 http://jsfiddle.net/p73wW/8/

【讨论】：

【解决方案3】：

试试这个：

$(document).ready(function() {
$("#ckbCheckAll").click(function() {
      var checked = false;
      if($(this).prop('checked') == true) {
          checked = true;
      }
      $("#myTable tbody tr").each(function() {
          if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
              $(this).find(".checkBoxClass").prop('checked', checked);
          }
      });
});

$('.checkBoxClass').click(function() {
    var i = 1;
    var totalCheckboxes = $("#myTable tbody tr").length;
    if($(this).prop('checked') == true) {
        $("#myTable tbody tr").each(function() {
            if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
                if($(this).find(".checkBoxClass").prop('checked') == true) {
                    i++;
                }
            }
        });
    }
    if(i==totalCheckboxes) {
        $("#ckbCheckAll").prop('checked', true);
    } else {
        $("#ckbCheckAll").prop('checked', false);
    }
});

count = 5;
$('#save').click(function() {
    $('.checkBoxClass').each(function() {
        if ($(this).is(':checked')) {
            $(this).prop('disabled', true);
        }
    });
    $("#ckbCheckAll").prop('checked', false);
});

$('#add').click(function() {
    count = count + 1;
    $('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});

Updated Fiddle

【讨论】：

选中所有复选框时全选不起作用
添加一个新的复选框选择所有复选框，然后按保存。现在再添加一个复选框，尝试选择它，然后您观察到全选复选框未选中

【解决方案4】：

这是另一种方法。我没有使用filter，而是使用了:enabled。还使用on jquery 来检测新添加的复选框。希望对你有帮助。

$(document).on('click','.checkBoxClass',function() {
        var selected = $('.checkBoxClass:enabled').length;
    if ($('.checkBoxClass:checked:enabled').length === selected) {
      $('#ckbCheckAll').prop('checked', true);
    } else {
      $('#ckbCheckAll').prop('checked', false);
    }
})

demo

【讨论】：