Question

​<form>
    <label for="1">Text 1</label>
        <input type="checkbox" name="1" value="something1" id="1"><br>
    <label for="2">Text 2</label>
        <input type="checkbox" name="2" value="something2" id="2"><br>
    <label for="3">Text 3</label>
        <input type="checkbox" name="3" value="something3" id="3"><br>
    <label for="4">Text 4</label>
        <input type="checkbox" name="4" value="something4" id="4">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Those are the checkboxes , I have tried to search all over the internet and didn’t find anything.

I want to allow the user to check id 3 and 4 BUT if he checks 1 , then 2 is not available to check, or if he checks 2 then 1 is not available to check.
And to the unavailable to add a class .. named ..
grade-out{ color: #DDD;}

Hope u understand the problem. Thanks in Advance !!

Answer 1

I would add data-groupid attribute to your checkboxes to identify which group they belong to. And then add a click handler to checkboxes belonging to group, which would disable all other checkboxes in the same group when checked and enable them when unchecked..

Assumming your markup is consistent and labels are always predecessors of respective checkboxes, you can easily target them using the prev() method.

$('input:checkbox[data-group]').click(function() {

    var groupid = $(this).data('group');
    var checked = $(this).is(':checked');

    if(checked) {

        $('input:checkbox[data-group=' + groupid + ']').not($(this))
           .attr('disabled', 'disabled')
           .prev().addClass('grade-out');

    } else {

        $('input:checkbox[data-group=' + groupid + ']')
           .removeAttr('disabled')
           .prev().removeClass('grade-out');

    }

});

DEMO