禁用页面上的所有按钮

Question

我有一个MVC视图,上面有许多按钮(篮子里的每个项目都有2个按钮)......

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

(他们都有一个onclick活动)

当按下这些按钮中的任何一个时,我想禁用每个产品的所有按钮,直到篮子完成更新.

click事件调用JavaScript函数,而JavaScript函数又调用Ajax.在这篇文章之后,我尝试做的第一件事是禁用所有按钮.....

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

然后在Ajax调用返回后重新启用它们....

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

我没有错误,但按钮没有被禁用.

我哪里错了？

Answer 1

你的选择器错了.而不是input..选择器,你应该使用:button伪选择器.

您可以使用:button选择器选择所有按钮.

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

要启用所有按钮:

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

编辑

如果您只想禁用id以Productuse 开头的按钮:

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

Answer 2

如果有人正在寻找普通的 JavaScript 解决方案：

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