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.

Answer 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

Answer 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