单击具有类似类的复选框时禁用其他复选框

时间:2013-08-30 19:07:22

标签: javascript jquery html

一旦检查其中一个复选框,我需要禁用其他复选框。

$('.Cat .RoleChk').change(function(){
    if($(this).is(':checked')){
$('.Cat .RoleChk').attr('disabled',true);
    $(this).attr('disabled','');
}
else{
$('.Cat .RoleChk').attr('disabled','');
}
});

<div class="Cat" style="width: 155px; float: left">
        <p>Employee Role</p>     
        <input class="RoleChk" name="Role" type="checkbox" value="OfficeEmployee"/>&nbsp;Office Employee<br/>
        <input class="RoleChk" name="Role" type="checkbox" value="Marketer"/>&nbsp;Marketer<br/>
        <input class="RoleChk" name="Role" type="checkbox" value="ProjectManager"/>&nbsp;Project Manager<br/>
    </div>

    <div class="Cat" style="width: 155px; float: left">
        <p>Groups</p>
        <input class="GrpChk" name="Group" type="checkbox" value="Aviation"/>&nbsp;Aviation<br/>
        <input class="GrpChk" name="Group" type="checkbox" value="Electrical"/>&nbsp;Electrical<br/>
        <input class="GrpChk" name="Group" type="checkbox" value="Mining"/>&nbsp;Mining
    </div>

2 个答案:

答案 0 :(得分:1)

怎么样:

$(".RoleChk, .GrpChk").change(function() {
    this.checked ? $("." + this.className).not(this).prop("disabled", true) : $("." + this.className).not(this).prop("disabled", false);
});

演示:http://jsfiddle.net/tymeJV/96Wvq/1/

我保留了已启用的原始复选框,这允许用户取消选中并重新启用。如果您要删除此功能,请从三元组中取出.not(this)

答案 1 :(得分:0)

<script>
jQuery(document).ready(function(){
    $('.Cat .RoleChk').change(function(){
        if($(this).is(':checked')){
            $('.Cat .RoleChk').attr('disabled',true);
            $(this).removeAttr("disabled");
        }
        else{
            $('.Cat .RoleChk').removeAttr("disabled");
        }
    });
});
</script>