31

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

Jake
  • 25,479
  • 31
  • 107
  • 168

6 Answers6

29

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
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • This works perfectly... If I have to enable the checkbox, then will it be $("input:checkbox[name='chk0']").attr('disabled',false); – Jake Jan 05 '10 at 22:45
  • well.. as shown in the http://www.w3schools.com/tags/att_input_disabled.asp the official value to put would be disabled again so $("input:checkbox[name='chk0']").attr('disabled','disabled'); – Gabriele Petrioli Jan 05 '10 at 22:55
  • got it.. Thanks to Hogan on this.. $("input:checkbox[name='chk0']").attr('disabled','disabled'); works fine – Jake Jan 05 '10 at 22:55
  • 1
    jQuery is an insane way to do this. How much simpler could it be than setting the checkbox's `disabled` property to false? – Tim Down Jan 05 '10 at 23:02
  • Also, whether an element is disabled or not is most definitely a "true false scenario". Just don't involve attributes at all in your JavaScript and you'll be fine. – Tim Down Jan 05 '10 at 23:09
  • 3
    Actually it **is** a true false scenario. jQuery's `attr` method sets JS properties **not** HTML attributes (except in a couple of corner case workarounds; it does translate the HTML attribute name to the JS property name but this does not mean it is using attribute access). `attr('disabled', 'disabled')` only works because the string `'disabled'` is truthy; when you assign it to the boolean property `disabled` it acts like `true`. But the same is true of `'banana'` and any other non-empty string. – bobince Jan 05 '10 at 23:19
  • @bobince: that's what I said, only with added patient explanation. – Tim Down Jan 05 '10 at 23:23
  • @bobince - my experience is `attr('disabled',true)` did not work -- you suggest that it should have. Any ideas? – Hogan Jan 05 '10 at 23:25
  • the true false i mentioned was meant that you cannot disable the disabled atrtibute by setting it to false.. you have to remove the attribute completely. Also Vincent specifically states that he wants to do it through jQuery .. – Gabriele Petrioli Jan 05 '10 at 23:25
  • 1
    @Hogan - don't used it then. `$("input:checkbox[name='chk0']")[0].disabled = false;` is better (faster, clearer, simpler, working). @gaby - dealing with attributes is unnecessary and undesirable here, as it almost is in browser scripting. I'm suggesting not using jQuery's `attr()` and related methods, because as @bobince points out, the name is misleading and the implementation confusing. There's nothing stopping you from mixing DOM calls in with jQuery: see my example earlier in this comment. – Tim Down Jan 06 '10 at 00:54
  • point well taken, and i appreciate your persistence which just taught me something about how jquery handles some stuff .. regards – Gabriele Petrioli Jan 06 '10 at 01:07
  • @Tim: Thanks for your comments. I think I know what is going on here. attr is (string, string) and a call with (string, bool) fails on string convert or something more complicated. Sadly the jQuery website example shows what I wrote http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_an_element.3F – Hogan Jan 06 '10 at 01:21
11

Seriously, just don't use jQuery for this. disabled is a boolean property of form elements that works perfectly in every major browser since 1997, and there is no possible way it could be simpler or more intuitive to change whether or not a form element is disabled.

The simplest way of getting a reference to the checkbox would be to give it an id. Here's my suggested HTML:

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

And the line of JavaScript to make the check box enabled:

document.getElementById("chk0_checkbox").disabled = false;

If you prefer, you can instead use jQuery to get hold of the checkbox:

$("#chk0_checkbox")[0].disabled = false;
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • +1 use jQuery for what it's good for, don't blindly apply it everywhere. – bobince Jan 05 '10 at 23:22
  • Is it wrong to use jquery just so you can select the right element? As in a case where you gave two elements the same id, but nested them inside other elements with different ids, so you can select one with $(#parent1 #child) and the other with $(#parent2 #child)? – BCarpe Jul 28 '11 at 15:06
  • @BCarpe: Having two elements with the same `id` is invalid and should be avoided. However, it's reasonable to use jQuery to set a property of multiple elements at once. I'd suggest using `$("whatever").prop("disabled", false)` in jQuery 1.6. – Tim Down Jul 29 '11 at 09:52
5

"True" and "False" do not work, to disable, set to value disabled.

$('.someElement').attr('disabled', 'disabled');

To enable, remove.

$('.someElement').removeAttr('disabled');

Also, don't worry about multiple items being selected, jQuery will operate on all of them that match. If you need just one you can use many things :first, :last, nth, etc.

You are using name and not id as other mention -- remember, if you use id valid xhtml requires the ids be unique.

Hogan
  • 69,564
  • 10
  • 76
  • 117
2

$("#chk0") is refering to an element with the id chk0. You might try adding id's to the elements. Ids are unique even though the names are the same so that in jQuery you can access a single element by it's id.

Vincent Ramdhanie
  • 102,349
  • 23
  • 137
  • 192
  • +1 this is simpler and will be much faster than the `:checkbox` selector which is non-standard (forcing jQuery to use the slow Sizzle selector engine instead of a browser's fast querySelectorAll method). – bobince Jan 05 '10 at 23:20
0

Use an ID to uniquely identify the checkbox. Your current example is trying to select the checkbox with an id of '#chk0':

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

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

You'll also need to remove the attribute for disabled to enable the checkbox. Something like:

$('#chk0').removeAttr("disabled");

See the docs for removeAttr

The value XHTML for disabling/enabling an input element is as follows:

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

Note that it's the absence of the disabled attribute that makes the input element enabled.

leepowers
  • 37,828
  • 23
  • 98
  • 129
0

You can add different classes to select, or select by type like this:

$('input[type="checkbox"]').removeAttr("disabled");

Yang
  • 7,712
  • 9
  • 48
  • 65
honeybuzzer
  • 139
  • 4