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.