Question

I have following HTML with two elements having the same name

<input type="hidden" name= "chk0" value="">
<input type="checkbox" name="chk0" value="true" disabled>

Through JQuery, I want to set the enable the checkbox. So, I am using something like this:

$('#chk0').attr("disabled",false);

But this doesn’t work. I assume JQuery is getting confused with two elements having the same identical name. Unfortunatel, I cannot avoid using two different names because, when the form is posted, I want all the checkboxes to get posted (not just the ones that are checked). Hence I have to use hidden element with the same name.. So, back to the question, how can I enable the checkbox through JQuery in the above scenario? Is there a “type” parameter for attr which distingues hidden from checkbox?

Thanks

Answer 1

Some things before the actual code..

the hash (#) you use as the selector is for IDs and not for names of elements.
also the disabled attribute is not a true false scenario .. if it has disabled attribute it means that it is true .. you need to remove the attribute and not set it to false.
Also there are the form selectors that identify specific types of items in a form ..

so the code would be

$("input:checkbox[name='chk0']").removeAttr('disabled');

---

Bringing the answer up-to-date

You should use the .prop() method (added since v1.6)

$("input:checkbox[name='chk0']").prop('disabled', false); // to enable the checkbox

and

$("input:checkbox[name='chk0']").prop('disabled', true); // to disable the checkbox