jQuery enable/disable checkbox based on checkbox selection

Question

EDIT: I should have explained that the second set of checkboxes only some are enabled depending on what the user selects from the first set - if a user selects the first checkbox, then the second checkbox in the second set is enabled, whereas if they select the second box in the first set then a different set of checkboxes in the second set are enabled. Apologies, should have explained more clearly.

I have a two series of checkboxes as follows:

<input class="oDiv" type="checkbox" value="1" />
<input class="oDiv" type="checkbox" value="2" />

<input disabled="disabled" class="Spec" type="checkbox" value="1" />
<input disabled="disabled" class="Spec" type="checkbox" value="2" />
<input disabled="disabled" class="Spec" type="checkbox" value="5" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="8" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="10" />  
<input disabled="disabled" class="Spec" type="checkbox" value="30" />

I have some jQuery code that enables the second set of checkboxes based on a selection:

$('.oDiv').on('click', function() {
var select = $(this).val();

 if(select==1){
    $('.Spec:eq(1)').prop('disabled', false);
 }
     else{$('.Spec').prop('disabled', true);}
});

Now, what happens is that when a user selects 1, the correct checkbox in the second list is enabled but when the user clicks off, it doesn't disable.

jsFiddle: http://jsfiddle.net/pvSeL/

So what I am trying to achieve is when a user selects a checkbox, the relevant items are enabled and when they uncheck the checkbox they become disabled.

Solution 1

If you want to toggle a checkbox based on the checked state of another,

$('.oDiv').on('click', function() {
    var select = $(this).val();

     if(select==1) {
        $('.Spec:eq(4)').prop('disabled', !$(this).is(':checked'));
     }
});

jsFiddle

---

To generalise this process, you can do the following:

$('.oDiv').on('click', function () {
    var enable = {
        1: [1, 2, 30],
        2: [5, 8, 10]
    };
    var val = $(this).val();
    var checked = $(this).is(':checked');
    enable[val] && enable[val].forEach(function (v) {
        console.log( $('.Spec[value="' + v + '"]'));
        $('.Spec[value="' + v + '"]')
            .prop('disabled', !checked);
    });
});

jsFiddle

Solution 2

val() will always return 1 in your code as it gets the value attribute from the element, regardless of whether it is checked/selected or not. You can use the checked property of the native DOM element to do this:

$('.oDiv').on('click', function () {
    if (this.checked) {
        $('.Spec:eq(1)').prop('disabled', false);
    } else {
        $('.Spec').prop('disabled', true);
    }
});

You could also use the :checked selector in jQuery.

Updated fiddle

---

How does this work if I only want a selection of the second set of checkboxes enabled if the first checkbox is 1 and then a different set if the checkbox is 2?

You need to put some logic in place to check the states of both checkboxes when either of them is clicked. Something like this:

$('.oDiv').on('click', function () {
    var $checkboxes = $('.oDiv');
    $('.Spec').prop('disabled', true);

    if ($checkboxes.eq(0).prop('checked') && $checkboxes.eq(1).prop('checked')) {
        $('.Spec').eq(1).prop('disabled', false);
    }
    else if ($checkboxes.eq(0).prop('checked')){
        $('.Spec').eq(2).prop('disabled', false);
    } 
    else if ($checkboxes.eq(1).prop('checked')){
        $('.Spec').eq(3).prop('disabled', false);
    } 
});

Example fiddle

Solution 3

For a checkbox, val() will always return the value of the checkbox, that is, the value that would be submitted when it is checked and the form is posted. To check if a checkbox is checked, use

$(this).prop('checked')

or

$(this).is(':checked')

or just

this.checked

Also see http://jquery-howto.blogspot.nl/2013/02/jquery-test-check-if-checkbox-checked.html for more information and useful tricks.

Comments

[lonesomeday]

$(this).is(':checked') is never necessary. Use this.checked instead.

[Homer_J]

How does this work if I only want a selection of the second set of checkboxes enabled if the first checkbox is 1 and then a different set if the checkbox is 2?

[Rory McCrossan]

@Homer_J you need to put come logic in place to check the states of both checkboxes when either of them is clicked.

[Homer_J]

That's what I am looking for! :-)

[lonesomeday]

Or, better, just this.checked.

[Rory McCrossan]

You can remove the if statement as the value will always be 1

[Rory McCrossan]

@Homer_J see my update for a working example of that

[Homer_J]

Thanks Rory - yes, makes sense - much appreciated.

[azz]

@Homer_J check the updated version for a generalised version.