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.

I'm wondering if your form needs checkboxes. what about radiobuttons? give a code example and perhaps a screenshot of the form. — Stefanvds
– Stefanvds, Commented Sep 7, 2010 at 10:08

jigfox · Accepted Answer · 2010-09-07 10:57:40Z

6

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

edited Sep 7, 2010 at 10:57

answered Sep 7, 2010 at 10:23

jigfox

18.2k3 gold badges62 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

John Over a year ago

I wanted to disable them rather than bind them as when the form is submitted I want to get the value of the one they actually selected (Although they have the same name they have different values depending on what section they were selected in).

Matt Ellen Over a year ago

then I would use jigfox's solution, and change it to uncheck all, then check the current one.

John Over a year ago

GREAT! works perfectly. Is there any way to disable the label as well.

jigfox Over a year ago

you can't disable a label, you can only disable input s. But what you can do is to make it look disabled. see my updated response

Ralpharama Over a year ago

I had problems with attrib when I tried to clear boxes using this method - it would come back as undefined. If you use prop instead then it seemed to work fine:

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

Collectives™ on Stack Overflow

JQuery - disable duplicate checkboxes when checked

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related