Question

我在表格中有多个复选框，我编写了用于选择/取消选中所有复选框以及启用/禁用按钮的代码。（选择所有复选框是列的标题）

$(function(){
   $('#SelectAll').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
        $('#Assign').removeAttr("disabled");
    }
    if(!this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = false;
       });
       $('#Assign').attr("disabled","disabled");
    }
});
});

虽然如果用户决定单独选中复选框并取消选中所有进程，我如何编写以下代码以检查是否所有这些代码都未选中并禁用按钮

 $(function(){
$(':checkbox').click(function(event){
    if(this.checked){
        $('#Assign').removeAttr("disabled");
    }
    if(!this.checked){
        //Need to put code here to check if all of them are unchecked
           {
                 //disable the Assign button if all are unchecked by user
                 $('#Assign').attr("disabled","disabled");
               }

    }
});
});

Answer 1

整体功能可以简化为

$(function(){
    var checkboxes = $(':checkbox:not(#SelectAll)').click(function(event){
        $('#Assign').prop("disabled", checkboxes.filter(':checked').length == 0);
    });

    $('#SelectAll').click(function(event) {   
        checkboxes.prop('checked', this.checked);
        $('#Assign').prop("disabled", !this.checked)
    });
});

演示：Fiddle

Answer 2

尽管你已经接受了答案，但我自己对此采取了以下措施：

$('#selectAll').click(function(){
    var self = $(this);
    self.prop('disabled', function(i,d) {
        return !d;
    }).closest('table').find('input[type="checkbox"]').prop('checked',true);
});
$('input[type="checkbox"]').change(function(){
    var all = $(this).closest('tbody').find('input[type="checkbox"]');
    $('#selectAll').prop('disabled',function(){
        return all.length === all.filter(':checked').length;
    });
});

JS Fiddle demo

参考文献：

Answer 3

jQuery函数.attr("checked", true/false)和.removeAttr("checked")效果不佳。更好地使用.click()功能。如果您对Opera 12.16和6 javascript字符串发表评论并取消注释9和7，则可以在11链接Select all上看到该链接。 Deselect all和<table><tbody> <tr> <td>Select all:</td> <td><button onclick="chk(this, true);">Select all</button></td> </tr> <tr> <td>Deselect all:</td> <td><button onclick="chk(this, false);">Deselect all</button></td> </tr> <tr> <td>First checkbox:</td> <td><input type="checkbox" onchange="chk(this, null);" /></td> </tr> <tr> <td>Second checkbox:</td> <td><input type="checkbox" onchange="chk(this, null);" /></td> </tr> <tr> <td>Enabled/disabled button:</td> <td><button id="enDisButton" disabled="disabled">If you can click on me then I'm enabled</button></td> </tr> </tbody></table>按钮仅首次使用未注释的字符串 HTML：

function chk(elem, selectAll){
    // input/button -> td -> tr -> tbody
    var tbody = $($(elem).parent().parent().parent());
    console.log("cb");
    if (selectAll === true) {
        tbody.find('input:checkbox:not(:checked)').click();
        //tbody.find('input:checkbox:not(:checked)').attr("checked", true);
    } else if (selectAll === false) {
        tbody.find('input:checkbox:checked').click();
        //tbody.find('input:checkbox:checked').attr("checked", false);
    } else {
        //clicking on checkbox
    }
    // all unchecked
    if (tbody.find('input:checkbox:checked').length == 0) {
        $("#enDisButton").attr("disabled", "disabled");
    // all checked
    } else if (tbody.find('input:checkbox:not(:checked)').length == 0) {
        $("#enDisButton").removeAttr("disabled");
    }
}

Javascript：

{{1}}

如果选中/取消选中复选框，则启用/禁用按钮

3 个答案: