Disable button if all checkboxes are unchecked and enable it if at least one is checked

Question

I have a table with a checkbox in each row and a button below it. I want to disable the button if at least one checkbox is checked.

<tbody>
    <tr>
        <td>
            <input class="myCheckBox" type="checkbox"></input>
        </td>
    </tr>
</tbody>
<button type=submit id="confirmButton"> BUTTON </button>

The jQuery I came up with to accomplish this is the following:

$('tbody').click(function () {
    $('tbody tr').each(function () {
        if ($(this).find('.myCheckBox').prop('checked')) {
            doEnableButton = true;
        }
        if (!doEnableButton) {
            $('#confirmButton').prop('disabled', 'disabled')
        }
        else {
            $('#confirmButton').removeAttr("disabled");
        }
    });
});

Naturally, this does not work. Otherwise I would not be here. What it does do is only respond to the lowest checkbox (e.g., when the lowest button is checked/unchecked the button is enabled/disabled).

I made a JSFIddle here although it does not show the same behaviour as locally.

Does any know how I can accomplish that it responds to all checkboxes and disables the button if they are ALL disabled?

Solution 1

Try this:

var checkBoxes = $('tbody .myCheckBox');
checkBoxes.change(function () {
    $('#confirmButton').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.change(); // or add disabled="true" in the HTML

Demo

Explanation, to what I changed:

• Cached the checkbox element list/array to make it a bit faster: var checkBoxes = $('tbody .myCheckBox');
• removed the if/else statement and used prop() to change between disable= true/false.
• filtered the cached variable/array checkBoxes using filter() so it will only keep the checkboxes that are checked/selected.
• inside the second parameter of prop added a condition that will give true when there is more than one checked checkbox, or false if the condition is not met.

Solution 2

Add an event handler that fires when a checkbox is changed, and see if there are any checked boxes, and set the disabled property appropriately :

var boxes = $('.myCheckBox');

boxes.on('change', function() {
    $('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
}).trigger('change');

FIDDLE

Solution 3

Try this:

$('tbody').click(function () {

   if ($('.myCheckBox:checked').length >= 1) { 
           $('#confirmButton').prop("disabled", true);
       }
   else {
            $('#confirmButton').prop("disabled", false);
   } 

 });

DEMO

Comments

[VisioN]

However in the final question he formulated it as "... disables the button if they are ALL disabled". If so, than my fiddle might be helpful, since I understood the task exactly in this way.

[user2609980]

THis works like a charm only it is the wrong way around as @VisioN states ;-).

[adeneo]

@user2609980 - Oh okay, I misunderstood the meaning of "disable button if at least one box is checked" then? Fixed it.

[Sergio]

@FelixKling, very true! just added that.

[Sergio]

@user2609980, glad I could help. Added some explanation also.

[ali zarei]

This cannot be the correct answer. Please read the questions carefully when answering!