0

I have four buttons with button2 as id.

document.getElementById('button2').disabled=true;

With the above code, Only one button is disabled. I want all buttons to be disabled.
Any ideas.
Thank you.

3
  • 4
    ID is short for identifier. You should only use it once per page, or you must expect it not to work as expected. Commented Aug 2, 2013 at 17:14
  • 1
    You should use different ids for different elements. Alternatively, use a class and retrieve the elements by getElementsByClassName Commented Aug 2, 2013 at 17:14
  • I have four buttons with button2 as id. That's your problem, ids are supposed to be unique (as in, one per element). Commented Aug 2, 2013 at 17:22

2 Answers 2

9

I have four buttons with button2 as id.

Don't do that, it's invalid. id values must be unique in the document.

Instead, perhaps give them the same class:

<input type="button" class="button2">
<input type="button" class="button2">
<input type="button" class="button2">
<input type="button" class="button2">

Then on modern browsers you can do this:

var list = document.querySelectorAll(".button2");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].disabled = true;
}

That works on current versions of, well, nearly everything. It doesn't work on IE7 and earlier. If you need to support those, I recommend using a decent DOM manipulation library (like jQuery, YUI, Closure, or any of several others), which will have the ability to look up elements by class.


Alternately, you can give them the same name and use the older getElementsByName, which is on even IE6 and IE7:

<input type="button" name="button2">
<input type="button" name="button2">
<input type="button" name="button2">
<input type="button" name="button2">

Then much the same loop:

var list = document.getElementsByName("button2");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].disabled = true;
}

But there are a couple of caveats to using name for this:

  1. If this is in a form, while it would be fine in this case to do this because these are buttons, you may not want to use name for this in the general case. If you use the same name for multiple text fields or select boxes, for instance, you have to be sure you handle that right on the server-side when you receive the repeated field names.

  2. Similarly, while fine for this use, name is only a valid attribute on form fields, not other kinds of elements. So again while okay for buttons, you don't want to generalize it.

  3. Be careful not to use "button2" as an id on that same page, because IE8 and earlier have a bug in them that will make it act like that element has the name "button2" even though it doesn't. It's the same bug I talk about here in relation to getElementById.

So in general, class is probably the better way to go.

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

7 Comments

you can do the same with the name property and then getElementsByName this is the right answer.
@abc123: Yeah, I was commenting on your answer when you deleted it (saying "@theotheruser This is a perfectly acceptable use case for name") and asking you: What's the support like for getElementsByName?
it is usable in all browsers even IE since 5.5 developer.mozilla.org/en-US/docs/Web/API/…
@abc123: Yeah, was just experimenting. Sadly, it's broken in IE8 and earlier (the same way getElementById is), but that can be worked around by avoiding using the same string for names and IDs: jsbin.com/orahez/1 (source).
@talemyn: It's fine for buttons (since they aren't submitted with the form; if they were submit buttons, only the one actually clicked would be submitted with the form). You're absolutely correct it wouldn't be fine for, say, text fields unless you expected to deal with that correctly server-side (which a lot of people do; it's not uncommon to deal with receiving multiple fields with the same name). I'll add a note.
|
0

There should only be 1 occurence of an id value on a single page. Use different id values for each button (e.g., use id="button1" for one button, and id="button2" for the other button.

Then you can disable each of the buttons, one at a time:

document.getElementById('button1').disabled=true;
document.getElementById('button2').disabled=true;

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.