2

テーブルに複数のチェックボックスがあり、すべてのチェックボックスを選択/選択解除し、ボタンを有効/無効にするコードを記述しました。(すべて選択チェックボックスは列のヘッダーです)

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

    }
});
});
4

3 に答える 3

8

関数全体は次のように簡略化できます。

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

デモ:フィドル

于 2013-08-06T06:44:12.047 に答える
0

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");
    }
}
于 2013-08-06T11:17:52.993 に答える
0

あなたがすでに回答を受け入れているにもかかわらず、これに対する私自身の見解は次のとおりです。

$('#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 フィドルのデモ。

参考文献:

于 2013-08-06T07:04:29.533 に答える