2

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    

});
4
  • 7
    First question: why not use radio buttons? Jul 6, 2012 at 15:47
  • Doesn't fit my application. I just want a general script for this sort of situation. Jul 6, 2012 at 15:49
  • Try to add the HTML so we can see if there is an error there
    – nicowernli
    Jul 6, 2012 at 15:53
  • too bad it gives me $inputs.prop is not a function i switched to js (link)[stackoverflow.com/questions/6060681/…
    – shareef
    Nov 2, 2013 at 9:11

3 Answers 3

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/

1
  • That will affect every checkbox in every .optionBox on the page. That might be ok, but also might not be what's wanted. Jul 6, 2012 at 17:27
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"); 

});​
2
  • I wouldn't be certain that the other checkboxes are simple siblings of the given checkbox. Jul 6, 2012 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 6, 2012 at 17:26
1

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.