jQuery enable/disable checkbox based on checkbox selection - php

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

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

Answer 4

I'm struggling slightly to work out what you want to do. But I think you probably want to do something like this:
$('.oDiv').on('click', function () {
var select = this.value; // get the value of the element clicked
$('.Spec')
.prop('disabled', true) // disable all .Spec checkboxes
.eq(select) // look at the checkbox with the position given
// by select
.prop('disabled', !this.checked); // set it to disabled or enabled
// depending on whether the box is
// checked
});
http://jsfiddle.net/lonesomeday/pvSeL/2/