Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 543
Erwin Rooijakkers Avatar asked Dec 19 '13 17:12

Erwin Rooijakkers


People also ask

How do you disable a button until a checkbox is checked in angular?

We will use the Angular JS directive named ng-disabled to disable the button by unchecking the box. Please refer to AngularJS ng-disabled Directive. The ng-disabled directive is used to enable or disable the HTML elements.

How do you disable button until all fields are entered?

Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty.

How do I disable a button until a checkbox is checked?

The best way to approach this is to disable the HTML button by default. i.e. Set the button to disabled using the disabled HTML attribute and then enable it using JavaScript if the checkbox is ticked. Disabling a button until a checkbox is checked using regular JavaScript.

What happens when the user clicks on the checkbox in JavaScript?

Now, let’s look at the JavaScript function that will be called when the user clicks on the checkbox: The JavaScript function above checks to see if the checkbox in question has been ticked. If it has been checked, then it sets the disabled property on our submit button to FALSE. Essentially, this enables the button.

What happens when a user checks or unchecks a checkbox?

If a user clicks on the checkbox, a JavaScript function called terms_changed will be called. The this parameter that we are passing into our function represents the event will occur when the user checks or unchecks the checkbox. Our button has been set to disabled by default because we used the disabled HTML attribute.

How do I enable the submit button on a checkbox?

The JQuery example above is pretty simple: We attached a click event handler onto the terms and conditions checkbox. When the checkbox is clicked, our event handler checks to see whether or not the element has been set to “:checked”. If it is checked, we enable the submit button by setting the disabled property to FALSE.


2 Answers

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

like image 161
adeneo Avatar answered Sep 17 '22 04:09

adeneo


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.
like image 44
Sergio Avatar answered Sep 20 '22 04:09

Sergio