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

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

演示：小提琴

Answer 2

jQuery 功能.attr("checked", true/false)和.removeAttr("checked")效果不好。更好的使用.click()功能。如果您评论和javascript 字符串并取消评论和取消评论，您可以Opera 12.16在此链接中看到它。和按钮仅在第一次使用未注释的字符串时起作用。 HTML： 69711Select allDeselect 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>  

Javascript：

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

Answer 3

尽管您已经接受了答案，但我自己对此的看法如下：

$('#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 小提琴演示。

参考：

• change().
• closest().
• filter().
• prop().