Disable certain buttons javascript when id's are different

Question

I want to disable a certain group of buttons at a specific time. Using this js:

document.getElementById("reset").setAttribute('disabled','disabled');

But all IDs are different, the buttons is like <button id=1> <button id=2> etc. Can I set some made up variable like <button group="hello">

And then do something like this:

document.getElementById("group:hello").setAttribute('disabled','disabled');

to disable all of the buttons, even though the ID attribute is different from button to button?

You can give the elements class names and then use getElementsByClassName() to retrieve them. That returns a list of elements, and you would iterate over the list and set the attribute on each one separately. — Pointy
– Pointy, Commented Mar 19, 2018 at 15:00

TiGreX · Accepted Answer · 2018-03-19 15:13:07Z

1

what you can do is use the data attribute, see next:

<button  data-group="hello" id="button1">test1</button>
<button  data-group="hello" id="button2">test2</button>
<button  data-group="hello" id="button3">test3</button>

and the JS

 document.querySelectorAll('[data-group="hello"]').forEach(function(button) {
      button.disabled = true;
});

edit, here is the fiddle https://jsfiddle.net/xycmj4gv/2/

edited Mar 19, 2018 at 15:13

answered Mar 19, 2018 at 15:09

TiGreX

1,8263 gold badges30 silver badges46 bronze badges

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

3 Comments

Kirill Over a year ago

You could chain forEach to querySelectorAll, without creating buttonList variable.

Zicsus Over a year ago

@Kirill I am not sure but i guess forEach have compatibility issue in some browser. I may be wrong.

Kirill Over a year ago

@Zicsus IE9+ same as querySelectorAll: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Daniele Dolci · Accepted Answer · 2018-03-19 15:06:01Z

0

Use class instead of ID. Code is easy:

document.getElementsByClassName("group1").setAttribute('disabled','disabled');

edited Mar 19, 2018 at 15:06

answered Mar 19, 2018 at 15:01

Daniele Dolci

8761 gold badge9 silver badges23 bronze badges

2 Comments

gawicks Over a year ago

This only gives you the first element

Jax Flaxx Over a year ago

Didn't work. Only one of all buttons disables even though they have the same class

gawicks · Accepted Answer · 2018-03-19 15:06:07Z

0

Since you tagged jquery

$(".mybutton").attr("disabled", true);

Where mybutton is

<button class= "mybutton"> </button>

answered Mar 19, 2018 at 15:06

gawicks

1,98416 silver badges23 bronze badges

Comments

hungersoft · Accepted Answer · 2018-03-19 15:06:44Z

0

Use class instead of id as follows:

var elements = document.getElementsByClassName("{yourClassName}");
var i;
for (i = 0; i < x.length; i++) {
    elements[i].setAttribute(“disabled”, “red");
}

<button class="{yourClassName}”></button>

answered Mar 19, 2018 at 15:06

hungersoft

5314 silver badges8 bronze badges

Comments

yajiv · Accepted Answer · 2018-03-19 15:07:26Z

0

You can use getElementsByTagName to get all buttons and then You can use Array.Prototype.forEach to disable all buttons like below. forEach will loop through all element and add desired attribute(in your case disabled) to all found elements.

Array.prototype.forEach.call
(document.getElementsByTagName("button"), function(e) {
      e.setAttribute('disabled','disabled');
 });

<button id="1">12</button> <button id="2">12</button>
<button id="3">12</button> <button id="4">12</button>

answered Mar 19, 2018 at 15:07

yajiv

2,9492 gold badges17 silver badges25 bronze badges

Comments

Blitzlord · Accepted Answer · 2018-03-19 15:08:14Z

0

You can use wildcards for Id's:

Starts-with selector

document.querySelector("[id^=myId]")

works for

id="myId1"
id="myId2"
...

or Ends-with selector

document.querySelector("[id$=myId]")

works for

id="firstMyId"
id="secondMyId",...

Hint: Please don't start Id's with numbers like: id="1myId". That's not w3c conform

answered Mar 19, 2018 at 15:08

Blitzlord

2612 silver badges9 bronze badges

Comments

Giorgi_Mdivani · Accepted Answer · 2018-03-19 15:09:23Z

0

use class to group buttons, like this:

var btnsGroup = document.getElementsByClassName('group');
Array.prototype.forEach.call(btnsGroup, function(button) {
  button.setAttribute('disabled','disabled');
});

answered Mar 19, 2018 at 15:09

Giorgi_Mdivani

3831 gold badge5 silver badges12 bronze badges

Comments

Zicsus · Accepted Answer · 2018-03-19 15:20:06Z

0

You can do something like this-

var buttons = document.querySelectorAll("[reset='true']");

for (i = 0; i < buttons.length; ++i) 
{
    buttons[i].setAttribute('disabled','disabled');
}

And HTML goes like this-

<button reset="true" >1 Candy</button>
<button reset="true" >2 Candy</button>

answered Mar 19, 2018 at 15:20

Zicsus

1,1551 gold badge10 silver badges20 bronze badges

2 Comments

Kirill Over a year ago

querySelectorAll has same browser support as forEach, so you might as well use it instead of for loop. Otherwise worth using one of the older DOM navigation functions for better browser support. caniuse.com/#feat=queryselector caniuse.com/#feat=es5

Zicsus Over a year ago

@Kirill Yeah, I am doing it like this because of browser support.

Collectives™ on Stack Overflow

Disable certain buttons javascript when id's are different

8 Answers 8

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related