Disable all checkboxes if one selected and enable when none selected

Question

Im' writing a basic script and I can't seem to understand why it is not working. Basically, the script locks all the checkboxes if one is selected and then unlocks them if the user decides to deselect the checkbox.

Here is the code

//Script for questions where you check one option or the other (locks other options out)
$('.optionBox input').click(function(){
    var optionBoxElement$ = $(this).closest('.optionBox');

    //If no option is checked, the make all the options available to be selected
    //Otherwise, one option must be checked so lock out all other options
    if(optionBoxElement.find('input:not(:checked)').length == optionBoxElement.find(':input').length)
        optionBoxElement.find(':input').prop('disabled',false); 
    else
        optionBoxElement.find('input:not(:checked)').prop('disabled',true); 
        optionBoxElement.find('input:checked').prop('disabled',false); //makes sure that the checkbox that was checked is not disabled so the user can uncheck and change his answer    

});

Doesn't fit my application. I just want a general script for this sort of situation. — user1410668, Jul 06 '12 at 15:49
Try to add the HTML so we can see if there is an error there — nicowernli, Jul 06 '12 at 15:53
too bad it gives me `$inputs.prop is not a function` i switched to js (link)[http://stackoverflow.com/questions/6060681/how-do-i-enable-disable-checkboxes-when-another-checkbox-is-selected/19740414#19740414] — shareef, Nov 02 '13 at 09:11

wirey00 · Accepted Answer · 2012-07-06T16:06:13.177

5

You can do it like below. All you have to do is check if the checkbox is checked.

$('.optionBox input:checkbox').click(function(){
    var $inputs = $('.optionBox input:checkbox'); 
    if($(this).is(':checked')){  // <-- check if clicked box is currently checked
       $inputs.not(this).prop('disabled',true); // <-- disable all but checked checkbox
    }else{  //<-- if checkbox was unchecked
       $inputs.prop('disabled',false); // <-- enable all checkboxes
    }
})

http://jsfiddle.net/ZB8pT/

edited Jul 06 '12 at 16:06

answered Jul 06 '12 at 15:58

wirey00

33,517
7
54
65

That will affect every checkbox in every .optionBox on the page. That might be ok, but also might not be what's wanted. – Scott Sauyet Jul 06 '12 at 17:27

score 1 · Answer 2 · answered Jul 06 '12 at 15:58

1

Something like this fiddle:

//Script for questions where you check one option or the other (locks other options out)
$(':checkbox').click(function(){ 

    var $checkbox = $(this);
    var isChecked = $checkbox.is(':checked')

    //If no option is checked, the make all the options available to be selected
    //Otherwise, one option must be checked so lock out all other options
    if(isChecked)
        $checkbox.siblings(":checkbox").attr("disabled", "disabled");
    else
        $checkbox.siblings(":checkbox").removeAttr("disabled"); 

});

answered Jul 06 '12 at 15:58

Kyeotic

19,697
10
71
128

I wouldn't be certain that the other checkboxes are simple siblings of the given checkbox. – Scott Sauyet Jul 06 '12 at 17:26
Fair enough, but its an example. I doubted he wanted every other checkbox disabled, and if they are grouped siblings makes sense. Its easy enough to change to any other selector, without losing functionality. – Kyeotic Jul 06 '12 at 17:26

score 1 · Answer 3 · answered Jul 06 '12 at 16:15

Something like this fiddle, perhaps.

$('.optionBox :checkbox').click(function() {
    var $checkbox = $(this), checked = $checkbox.is(':checked');
    $checkbox.closest('.optionBox').find(':checkbox').prop('disabled', checked);
    $checkbox.prop('disabled', false);
});

Disable all checkboxes if one selected and enable when none selected

3 Answers3