单击具有相似类的复选框时，禁用其他复选框 [英] disable other checkboxes when one with similar class is clicked

问题描述

我需要在选中其中一个复选框后立即禁用其余复选框.

I need to disable rest of the checkboxes with the same class as soon as one of them gets checked.

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

推荐答案

怎么样:

$(".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).

I kept the original checkbox that was checked enabled, this allows the user to uncheck and re-enable. If you want to remove this functionality, take the .not(this) out of the ternary.

这篇关于单击具有相似类的复选框时，禁用其他复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！