禁用页面上的所有按钮

Posted 2023-03-27

【中文标题】禁用页面上的所有按钮

【英文标题】：Disable all buttons on page

【发布时间】：2015-08-09 08:39:53

【问题描述】：

我有一个 MVC 视图，上面有许多按钮（篮子中的每个项目呈现 2 个按钮）...

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

（他们都有一个onclick 事件）

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

click 事件调用一个 javascript 函数，该函数又进行 Ajax 调用。在post 之后，我尝试做的第一件事就是禁用所有按钮.....

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

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

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

我没有收到任何错误，但按钮没有被禁用。

我哪里出错了？

【问题讨论】：

尝试使用 prop $("input[type=button]").prop("disabled", true);

你的元素不是inputs（它们是按钮！） - 将你的html更改为<input type="button" ... />（并使用.prop('disabled', true)）

@StephenMuecke Doh！谢谢我没有发现。直接从设计师那里拿了 html。

【参考方案1】：

您的选择器错误。而不是 input.. 选择器，您应该使用 :button 伪选择器。

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

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

启用所有按钮：

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

编辑

如果您只想禁用 id 以 Product 开头的按钮，请使用：

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

【讨论】：

使用:button 伪选择器与"button" 相比，使用prop 而不是attr 有什么意义？

:button 将选择所有 button、input[type="button"] 和 input[type="submit"]

隐藏按钮怎么样，这些解决方案不会改变隐藏按钮。

【参考方案2】：

可能是因为您没有使用input 标签，而是直接使用button 标签。请改用$("button").attr("disabled", "disable")。

【参考方案3】：

您需要使用button 选择器。像这样尝试prop

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