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

Question

一旦选中其中一个，我需要禁用具有相同类的其余复选框。

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

Answer 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)取出三元组。

Answer 2

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