javascriptjqueryhtmlajaxasp.net-mvc-5

Disable all buttons on page

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?

Solution

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