JQuery - disable duplicate checkboxes when checked

Question

I have a list of checkboxes grouped into sections. Some of these checkboxes can appear in more than one section. What I would like to do is stop the user from selecting the same checkbox in more than one section by disabling all checkboxes which are the same when the user selects a checkbox. However the checkbox they selected must not be disabled so they can uncheck it (this must also re-enable all the disabled checkboxes so they are free to select it in another section if they wish)

Does anyone know the best way of doing this in JQuery?

example code:

<h3>Section 1</h3>
<ul>
    <li>
        <label for="section1_method_1">
            <input name="method_1" value="43" id="section1_method_1" type="checkbox">Option 1
        </label>
    </li>
    <li>
        <label for="section1_method_2">
            <input name="method_2" value="2" id="section1_method_2" type="checkbox">Option 2
        </label>
    </li>
    <li>
        <label for="section1_method_5">
            <input name="method_5" value="6" id="section1_method_5" type="checkbox">Option 5
        </label>
    </li>
</ul>

<h3>Section 2</h3>
<ul>
    <li>
        <label for="section2_method_0">
            <input name="method_0" value="5" id="section2_method_0" type="checkbox">Option 0
        </label>
    </li>
    <li>
        <label for="section2_method_1">
            <input name="method_1" value="143" id="section2_method_1" type="checkbox">Option 1
        </label>
    </li>
</ul>

as you can see option 1 appears in both section 1 and 2. They each have different id's but the name is the same.

I would prefer to do it via checkboxes as the user might not realise that they has selected the same option in a different section whereas if the checkbox was disabled they would know that they had already selected it and if they wanted to change their choice they would have to physically uncheck it.

Answer 1

I wouldn't disable the checkboxes, I would just bind them together, so they change all like this:

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    checked = $(this).attr('checked');
    // this will set all the checkboxes with the same name to the same status
    $('input[type=checkbox][name='+name+']').attr('checked',checked);
});​

working example

---

Update: To disable other checkboxes:

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    id = $(this).attr('id');
    checked = $(this).attr('checked');
    // disable all checkboxes except itself
    $('input[type=checkbox][name='+name+']:not(#'+id+')')
        .attr('disabled',checked);
});​

working example

---

Update 2: To grey out the corresponding labels too:

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    id = $(this).attr('id');
    checked = $(this).attr('checked');
    $('input[type=checkbox][name='+name+']:not(#'+id+')')
        .attr('disabled',checked)
        .each(function(){
            lid = $(this).attr('id'); // the id of the current disabled box
            if (checked) {
                $('label[for='+lid+']').addClass('disabled');
            } else {
                $('label[for='+lid+']').removeClass('disabled');
            }
        });
});​

and some css:

.disabled {
    color: #888;
}

working example