Question

我想在我的代码中单击时禁用复选框。如果用户单击复选框A，则应禁用复选框B和C，但如果用户单击复选框B或C，则仅禁用A。用户将能够多选B和C. A应该在每种情况下单选。

<input type="checkbox" name="vehicle" value="Bike" class="a"> A
<input type="checkbox" name="vehicle" value="Car" class="b"> B
<input type="checkbox" name="vehicle" value="Bike" class="c"> C

Answer 1

修复你的html：

<input type="checkbox" name="vehicle" value="Bike" class="a"> A
<input type="checkbox" name="vehicle" value="Car" class="b"> B
<input type="checkbox" name="vehicle" value="Bike" class="c"> C

你可以这样做：

$("input").click(function(){
        var _class=$(this).attr('class');
        if($(this).is(':checked')){
            if(_class=='a'){
                    $('.b').attr('disabled','disabled');
                    $('.c').attr('disabled','disabled');
            }else if(_class=='b' || _class=='c'){
                $('.a').attr('disabled','disabled');
            }
        }else{
            if($("input:checked").length==0){
                $("input").removeAttr('disabled');
            }
        }
    });

Answer 2

对不起，没有完全阅读这个问题，并且错过了如果选中B或C则只应禁用A.这是一个工作版本，包括我添加的跨度（用于更改禁用输入的标签颜色）：

$(document).ready(function() {
    $('input').change(function(){
        if ($(this).is(':checked') && $(this).hasClass('a')) {
            $('input').not('.a').attr('disabled', true);
            $('input').not('.a').next('span').css('color', '#888888');
        } else if ($('.b').is(':checked') || $('.c').is(':checked')) {
            $('.a').attr('disabled', true);
            $('.a').next('span').css('color', '#888888');
            $('input').not('.a').attr('disabled', false);
        } else {
            $('input').attr('disabled', false);
            ('span').css('color', '');
        }
    });
});

小提琴：http://jsfiddle.net/nfcTE/2/

禁用复选框

2 个答案: