Jquery如果选中某个复选框，则禁用其他复选框

Jquery If a checkbox is checked disable other checkboxes

本文关键字：复选框 其他 如果 Jquery      更新时间：2023-09-26

我有一组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);
        }
    }
})

但不起作用。

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

试试这个http://jsfiddle.net/EACk4/

$(document).ready(function(){
    $('.class1').on('change', function(){        
        if($('.class1:checked').length){
            //or $('.class3').prop({disabled: 'disabled', checked: false});
            $('.class3').prop('disabled', true);
            $('.class3').prop('checked', false);
            return;
        }
        $('.class3').prop('disabled', false);
    });
    $('.class2').on('change', function(){
        if(!$(this).prop('checked')){
            $('.class2').prop('disabled', false);
            return;
        }
        $('.class2').prop('disabled', true);
        $(this).prop('disabled', false);
        !$('.class1:checked').length ? $('.class1').click() : '';
    });
})

我稍微修改了您的代码——我认为它实现了您想要的。

$('input[class*="class"]').click(function(){
var classValue = $(this).attr('class')
    ,isChecked = $(this).is(':checked');
if(classValue == 'class1'){ 
    if( !isChecked && $('.' + classValue + ':checked').length > 0 ) {
        return;
    }
    $('.class3').prop('disabled', isChecked ? true : false);
    $('.class3').prop('checked', isChecked ? false : null);
}
else if(classValue == 'class2'){
    if( isChecked && $('.class1 :checked').length <= 0 ){
        $('.class1').prop('checked', true);  
    }
     $('.class2').not(':checked').prop('disabled', isChecked ? true : false); 
    $('.class3').prop('disabled', isChecked ? true : false);
}
else if(classValue == 'class3'){
    $('.class1, .class2').prop('checked', isChecked ? false : null);
    $('.class1, .class2').prop('disabled', isChecked ? true  : false);   
}

})

相关文章：