10

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?

Community
  • 1
  • 1
Fred
  • 5,368
  • 4
  • 38
  • 67
  • Try using prop $("input[type=button]").prop("disabled", true); – Adil May 27 '15 at 10:13
  • 5
    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

3 Answers3

29

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"]')
Tushar
  • 78,625
  • 15
  • 134
  • 154
3

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

jered
  • 8,946
  • 2
  • 16
  • 30
1

You need to use button selector. Try prop like this

$('button').prop('disabled', true);
Zee
  • 8,051
  • 5
  • 31
  • 58