Disable all checkboxes if one selected and enable when none selected

html, javascript, jquery

Solution

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/

Problem

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 }); ```

Original source

Related problems