4

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.

Improve this question
1
  • The value of the checkbox does not change. But the checked state changes. Compare against this one instead of the checkbox value. Commented Nov 6, 2013 at 8:15

4 Answers 4

Reset to default
4

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

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

2 Comments

You can remove the if statement as the value will always be 1
@Homer_J check the updated version for a generalised version.
4

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

Improve this answer

5 Comments

$(this).is(':checked') is never necessary. Use this.checked instead.
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?
@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 see my update for a working example of that
Thanks Rory - yes, makes sense - much appreciated.
1

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.

Improve this answer

1 Comment

Or, better, just this.checked.
0

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/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.