UDigi UDigi - 3 months ago 18
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

Try this:

HTML:

<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>

jQuery:

$('input[type="checkbox"]').on('change', function() {
    if($('input[type="checkbox"]').eq(0).is(':checked')){
        $('input[type="checkbox"]').not($(this)).attr('disabled', true);
    }
    else{
        $('input[type="checkbox"]').not($(this)).attr('disabled', false);
    }
});

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

Comments