如果選中一個，則禁用所有復選框；如果未選中，則啟用

Question

我正在寫一個基本的腳本，我似乎無法理解為什么它不起作用。 基本上，如果選中一個復選框，腳本將鎖定所有復選框，然后，如果用戶決定取消選中該復選框，則腳本將解鎖它們。

這是代碼

//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    

});

Answer 1

您可以按照以下步驟進行操作。 您要做的就是檢查該復選框是否已選中。

$('.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/

Answer 2

像這樣的小提琴 ：

//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"); 

});​

Answer 3

也許像這樣的小提琴 。

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