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?

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