如果未选中带有jQuery的组中的至少一个，则取消选中组复选框

Question

I have a groups of checkboxes, with one that can check/uncheck the entire group. This functionality should only apply to checkboxed that are not disabled. When I used "main" checkbox to select all and then uncheck one of the checkboxes below, I should also uncheck the main one. However, if I check the one below back, thus making all checked, the "main" should become checked again.

I think I'm over complicating this code:

var checkboxes = $("#myTable input[type=checkbox:enabled]:not(:first)").change(function() {
    var allIsChecked = checkboxes.length === checkboxes.filter(":checked").length;
    all[0].checked = allIsChecked;
});

var all = $("#checkAll").change(function() {
    checkboxes.attr("checked",this.checked);
});

Answer 1

Your selector [type=checkbox:enabled] is not valid. You can exclude the disabled radio buttons by adding a not($("#myTable input[disabled=disabled]")) as such:

var $checkboxes = 
    $("#myTable input[type=checkbox]:not(:first)").
        not($("#myTable input[disabled=disabled]")).
        change(function() {
            var allIsChecked = $checkboxes.length === $checkboxes.filter(":checked").length;
            $all[0].checked = allIsChecked;
});

var $all = $("#checkAll").change(function() {
    $checkboxes.attr("checked", this.checked);
});

You can test here . Select all child radio buttons or select the main radio button

Answer 2

I think your code could be simpler :

var checkboxes = $("#myTable input[type=checkbox]:not(:first)");
checkboxes.change(function() {
  var allIsChecked = checkboxes.filter(:enabled:not(:checked)).size() === 0;
  all[0].checked = allIsChecked;
});

 var all = $("#checkAll").change(function() {
  checkboxes.filter(":enabled").attr("checked",this.checked);
});

This just checks that there is no checkbox that is both enabled and unchecked. I also include disabled checkboxes in the selector in order that the check all still works if you reenable one of them.