Jquery If a checkbox is checked disable other checkboxes

Question

I have a group of php generated checkboxes :

<?php foreach($checkbox as $check) {?>
<input type = "checkbox" name="checkbox[]" class="<?php echo $check -> class ?>" value ="<?php echo $check -> value ?>" /><?php echo $check->value ?>
<?php } ?>

Above PHP generates HTML below:

<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox1" />Checkbox1
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox2" />Checkbox2
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox3" />Checkbox3

<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox4" />Checkbox4
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox5" />Checkbox5
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox6" />Checkbox6

<input type="checkbox" name="checkbox[]" class="class3" value="Checkbox7" />Checkbox7
<input type="checkbox" name="checkbox[]" class="class3" value="Checkbox8" />Checkbox8

To explain above, I have three classes of checkboxes, and would like that:

If I check any in class1, class3 becomes disabled, if I uncheck, class3 is back enabled. If I check class2 , all of the other class2 become disabled, class1 remains checked if already checked, becomes checked if not.

I have tried doing this, using the Script below.

$('input[class*="class"]').click(function(){
    if($(this).is(':checked')){
        var classValue = $(this).attr('class');
        if(classValue == 'class1'){
            $('.class3').prop('disabled', true);
            $('.class3').prop('checked', false);
        }
        else if(classValue == 'class2'){

            $('.class2').not(':checked').prop('disabled', true);
            $('.class3').prop('disabled', true);
        }

        else if(classValue == 'class3'){

            $('.class1').prop('checked', false);
            $('.class2').prop('checked', false);
            $('.class1, .class2').prop('disabled', true);

        }

    }

})

Doesn't work though.

Your question doesn't say what should happen when checking class3, but your code has this case in it. Which is it? — Barmar
– Barmar, Commented Sep 2, 2013 at 15:57

Barmar · Accepted Answer · 2013-09-02 16:03:19Z

8

$('input[class^="class"]').click(function() {
    var $this = $(this);
    if ($this.is(".class1")) {
        if ($(".class1:checked").length > 0) {
            $(".class3").prop({ disabled: true, checked: false });
        } else {
            $(".class3").prop("disabled", false);
        }
    } else if ($this.is(".class2")) {
        if ($this.is(":checked")) {
            $(".class2").not($this).prop({ disabled: true, checked: false });
            $(".class1").prop("checked", true);
        } else {
            $(".class2").prop("disabled", false);
        }
    }
});

FIDDLE

edited Sep 2, 2013 at 16:03

answered Sep 2, 2013 at 15:56

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3120861 Over a year ago

This works great. I'm trying to do something similar where checking a "Checkbox Z" disables the other checkboxes. However, I need to add the functionality that re-enables those boxes and restores the checks if "Checkbox Z" is unchecked again. Let me know if anyone has any ideas on that.

Barmar Over a year ago

You can save the old state in a data attribute. Then when they uncheck Z, go through all the other checkboxes and check or uncheck them based on that attribute.

user3120861 Over a year ago

Thanks for pointing me in the right direction. That's out of my realm of knowledge, so I'll do some research on data attributes.

Dart · Accepted Answer · 2013-09-02 16:56:06Z

Try this http://jsfiddle.net/EACk4/

$(document).ready(function(){
    $('.class1').on('change', function(){        
        if($('.class1:checked').length){
            //or $('.class3').prop({disabled: 'disabled', checked: false});
            $('.class3').prop('disabled', true);
            $('.class3').prop('checked', false);
            return;
        }

        $('.class3').prop('disabled', false);
    });

    $('.class2').on('change', function(){
        if(!$(this).prop('checked')){
            $('.class2').prop('disabled', false);
            return;
        }
        $('.class2').prop('disabled', true);
        $(this).prop('disabled', false);

        !$('.class1:checked').length ? $('.class1').click() : '';
    });
})

philosofis · Accepted Answer · 2013-09-02 16:21:21Z

1

I modified your code a bit -- I think it accomplishes what you wanted.

$('input[class*="class"]').click(function(){

var classValue = $(this).attr('class')
    ,isChecked = $(this).is(':checked');

if(classValue == 'class1'){ 
    if( !isChecked && $('.' + classValue + ':checked').length > 0 ) {
        return;
    }
    $('.class3').prop('disabled', isChecked ? true : false);
    $('.class3').prop('checked', isChecked ? false : null);
}
else if(classValue == 'class2'){
    if( isChecked && $('.class1 :checked').length <= 0 ){
        $('.class1').prop('checked', true);  
    }
     $('.class2').not(':checked').prop('disabled', isChecked ? true : false); 
    $('.class3').prop('disabled', isChecked ? true : false);
}
else if(classValue == 'class3'){

    $('.class1, .class2').prop('checked', isChecked ? false : null);
    $('.class1, .class2').prop('disabled', isChecked ? true  : false);   
}

})

answered Sep 2, 2013 at 16:21

philosofis

111 bronze badge

1 Comment

philosofis Over a year ago

On second thought, @Barmar appears to have a more efficient working example. I haven't really used jQuery before.

Keith Perlstein · Accepted Answer · 2024-03-14 15:41:16Z

This is a very old question that I found useful - THANKS!

I modified this a bit for a more simple use case... where you just want to have a list of choices where one choice unchecks and disables all others. Unchecking the choice that fires the condition will reenable the other choices

Sample HTML

Chooose one:<br />
<input type="checkbox" name="choices-1" class="n_remove" value="1" />choice 1<br />
<input type="checkbox" name="choices-2" class="n_remove" value="2" />choice 2<br />
<input type="checkbox" name="choices-3" class="n_remove" value="3" />choice 3<br />
<input type="checkbox" name="choices-1" class="n_check" value="4" />none of the above<br />

Sample javascript

$(document).ready(function(){
    $('.n_check').click(function() {
        var $this = $(this);
        if ($this.is(".n_check")) {
            if ($(".n_check:checked").length > 0) {
                $(".n_remove").prop({ disabled: true, checked: false });
            } else {
                $(".n_remove").prop("disabled", false);
            }
        }
    });
});

fiddle https://jsfiddle.net/xkyucg6L/

Collectives™ on Stack Overflow

Jquery If a checkbox is checked disable other checkboxes

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related