Disable all buttons on page

Question

I have an MVC view with a number of buttons on it (each item in a basket renders 2 buttons)...

<button class="pbbg" id="ProductMinus_161637" type="button">-</button>
<button class="pbbg" id="ProductPlus_161637" type="button">+</button>

(they both have an onclick event)

When either of these buttons are pressed I want to disable all the buttons for every product until the basket has finished updating.

The click event calls a JavaScript function which in turn makes an Ajax call. Following this post the first thing I try to do is disable all the buttons.....

$("input[type=button]").attr("disabled", "disabled");

Then after the Ajax call returns reenable them....

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

I am getting no errors but the buttons are not disabled.

Where I am going wrong?

Try using prop $("input[type=button]").prop("disabled", true); — Adil, May 27 '15 at 10:13
Your elements are not `inputs` (they are buttons!) - change your html to `` (and use `.prop('disabled', true)`) — , May 27 '15 at 10:14
@StephenMuecke Doh! Thanks I didn't spot that. Took the html straight from the designer. — Fred, May 27 '15 at 10:17

Tushar · Accepted Answer · 2015-05-27T12:06:25.567

35

Your selector is wrong. instead of input.. selector you should use :button pseudo-selector.

You can use :button selector to select all the buttons.

$(':button').prop('disabled', true); // Disable all the buttons

To enable all the buttons:

$(':button').prop('disabled', false); // Enable all the button

EDIT

If you want to disable only the buttons whose id starts with Product use:

$('button[id^="Product"]')

edited May 27 '15 at 12:06

answered May 27 '15 at 10:15

Tushar

85,780
21
159
179

What is the point of using the `:button` pseudo-selector vs `"button"`, and of using `prop` over `attr`? – jered May 27 '15 at 10:20
4

`:button` will select all the `button`, `input[type="button"]` and `input[type="submit"]` – Tushar May 27 '15 at 10:21
what about hidden buttons, these solutions do not change hidden buttons. – matasoy May 11 '21 at 15:43

score 5 · Answer 2 · answered Sep 07 '22 at 12:53

5

If anybody is looking for a vanilla javascript solution:

const buttons = document.getElementsByTagName("button");
for (const button of buttons) {
  button.disabled = true;
}

answered Sep 07 '22 at 12:53

bancer

7,475
7
39
58

1

Upvoted, thanks! Should be accepted answer, `javascript` is tagged in the question before `jQuery`, thank you! – HoldOffHunger Nov 21 '22 at 21:09

score 3 · Answer 3 · answered May 27 '15 at 10:16

3

Probably because you're not using the input tag, you're using the straight button tag. Try $("button").attr("disabled", "disable") instead.

answered May 27 '15 at 10:16

jered

11,220
2
23
34

score 2 · Answer 4 · answered May 27 '15 at 10:15

2

You need to use button selector. Try prop like this

$('button').prop('disabled', true);

answered May 27 '15 at 10:15

Zee

8,420
5
36
58

score -1 · Answer 5 · answered Sep 07 '22 at 12:59

-1

if you want try this .

const buttons = document.getElementById("button"); buttons.setAttribute('disabled', true);

answered Sep 07 '22 at 12:59

Ojit Deb Nath

1

`getElementById` returns one element. The question is for disabling **all** elements of the button type. – HoldOffHunger Nov 21 '22 at 21:08

Disable all buttons on page

5 Answers5