CODEWITHSUNDEEP
jquerycheckbox
amsko
amsko

Reputation: 111

Enable/Disable a button if check boxes are checked/unchecked

I have multiple checkboxes in a table and I have written the code for selecting/deselecting all checkboxes and enabling/disabling a button with it. (Select All Checkbox is the header of the column)

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

Although if a user decides to check the checkboxes individually and uncheckes all in he process how do I write the below code to check if all of them are unchecked and disable the button

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

    }
});
});

Upvotes: 2

Views: 7369

Answers (3)

ostapische
ostapische

Reputation: 1592

jQuery function .attr("checked", true/false) and .removeAttr("checked") works not good. Better use .click() function. You can see it in Opera 12.16 on this link if you comment 6 and 9 javascript strings and uncomment 7 and 11. Select all and Deselect all buttons works only first time with uncommented strings.
HTML: 

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

My own take on this, despite your having already accepted an answer, would be the following:

$('#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.

References:

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

The overall function can be simplified as

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

Demo: Fiddle

Upvotes: 8

Related Questions