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?

Chiquita

Try using prop $("input[type=button]").prop("disabled", true); – Revolutionary

Your elements are not inputs (they are buttons!) - change your html to <input type="button" ... /> (and use .prop('disabled', true)) – Ayotte

@StephenMuecke Doh! Thanks I didn't spot that. Took the html straight from the designer. – Chiquita

Answer 1

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"]')

Sealey

What is the point of using the :button pseudo-selector vs "button", and of using prop over attr? – Wash

:button will select all the button, input[type="button"] and input[type="submit"] – Sealey

what about hidden buttons, these solutions do not change hidden buttons. – Bahr

Answer 2

If anybody is looking for a vanilla javascript solution:

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

Neace

Answer 3

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

Wash

Answer 4

You need to use button selector. Try prop like this

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

Transistor

Answer 5

Vanilla JavaScript solution:

// Disable all buttons
const allBtn = document.querySelectorAll('button')
allBtn.forEach((button) => {
  button.disabled = true;
});

Denten

Why use forEach instead of for..of in stackoverflow.com/a/73635866? – Bozeman

In my opinion, using a forEach is more cleaner. – Denten

Why? for..of clearly shows iteration with a familiar looping structure. Seems pretty clean to me. Can you back up the claim that this is "cleaner?" – Bozeman

It depends on your preference, no rule says it must be this or that, do what works best and can be easily read by other programmers. – Denten

Answer 6

if you want try this .

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

Saida

getElementById returns one element. The question is for disabling all elements of the button type. – Hulahula