javascript - Jquery 如果选中一个复选框禁用其他复选框

Question

我有一组 php 生成的复选框:

<?php foreach($checkbox as $check) {?>
<input type = "checkbox" name="checkbox[]" class="<?php echo $check -> class ?>" value ="<?php echo $check -> value ?>" /><?php echo $check->value ?>
<?php } ?>

上面的 PHP 生成下面的 HTML:

<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox1" />Checkbox1
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox2" />Checkbox2
<input type="checkbox" name="checkbox[]" class="class1" value="Checkbox3" />Checkbox3

<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox4" />Checkbox4
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox5" />Checkbox5
<input type="checkbox" name="checkbox[]" class="class2" value="Checkbox6" />Checkbox6

<input type="checkbox" name="checkbox[]" class="class3" value="Checkbox7" />Checkbox7
<input type="checkbox" name="checkbox[]" class="class3" value="Checkbox8" />Checkbox8

为了解释上面的内容，我有三类复选框，并且希望这样:

如果我选中 class1 中的任何一个，class3 将被禁用，如果我取消选中，class3 将重新启用。如果我检查 class2 ，所有其他 class2 将被禁用， class1 如果已经检查则保持检查状态，如果没有检查则变为检查状态。

我已经尝试使用下面的脚本来做到这一点。

$('input[class*="class"]').click(function(){
    if($(this).is(':checked')){
        var classValue = $(this).attr('class');
        if(classValue == 'class1'){
            $('.class3').prop('disabled', true);
            $('.class3').prop('checked', false);
        }
        else if(classValue == 'class2'){

            $('.class2').not(':checked').prop('disabled', true);
            $('.class3').prop('disabled', true);
        }

        else if(classValue == 'class3'){

            $('.class1').prop('checked', false);
            $('.class2').prop('checked', false);
            $('.class1, .class2').prop('disabled', true);

        }

    }

})

虽然不起作用。

Answer 1

$('input[class^="class"]').click(function() {
    var $this = $(this);
    if ($this.is(".class1")) {
        if ($(".class1:checked").length > 0) {
            $(".class3").prop({ disabled: true, checked: false });
        } else {
            $(".class3").prop("disabled", false);
        }
    } else if ($this.is(".class2")) {
        if ($this.is(":checked")) {
            $(".class2").not($this).prop({ disabled: true, checked: false });
            $(".class1").prop("checked", true);
        } else {
            $(".class2").prop("disabled", false);
        }
    }
});

FIDDLE