UDigi UDigi - 1 year ago 76
Javascript Question

If I select first checkbox then disable all remaining checkboxes

I have four check boxes inside a separate label.

If I select first check box then all remaining check boxes will be disable. If I click first again, all check boxes will be enabled.
If I select any other check box, the others are still enabled: I can select more than one. See image here

How can I set this up?

Answer Source

Try this:


<label for="one"><input type="checkbox" name="one" id="one"></label>
<label for="two"><input type="checkbox" name="two" id="two"></label>
<label for="three"><input type="checkbox" name="three" id="three"></label>
<label for="four"><input type="checkbox" name="four" id="four"></label>


$('input[type="checkbox"]').on('change', function() {
        $('input[type="checkbox"]').not($(this)).attr('disabled', true);
        $('input[type="checkbox"]').not($(this)).attr('disabled', false);

Working example: https://jsfiddle.net/e26vnnk2/