CODEWITHSUNDEEP
javascriptjqueryhtml
Athapali
Athapali

Reputation: 1089

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>

Upvotes: 0

Views: 1484

Answers (2)

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

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

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

How about:

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

Demo: http://jsfiddle.net/tymeJV/96Wvq/1/

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.

Upvotes: 1

Related Questions