如何使用 jQuery（或 js）禁用非输入元素？

Question

我正在尝试在请求发生时禁用一堆元素（具有 onClick 和其他自定义事件的 div）。

我尝试过：

$("selector").children().prop("disabled", true);

还有：

$("selector").children().attr("disabled", true);

还有：

$("selector").children().attr("disabled", "disabled");

这些都不起作用，这意味着即使在对它们应用禁用后，它们都保留了它们的功能。

为了确认我实际上能够针对我测试过的所有所需元素：

$("selector").children().css({backgroundColor: "black"});

所有元素都变为黑色，因此定位正确。

我对如何禁用元素的任何其他建议持开放态度，基本上这些是不应单击的 div（还有其他感兴趣的事件，而不仅仅是click ），在请求期间，一旦单击 div，即这就是为什么我试图暂时禁用它们，并在收到响应后再次启用它们。

Answer 1

disabled属性仅适用于输入元素，例如<input>和<button> 。 它不适用于某些样式看起来像按钮或输入的<div>或<li> （可能是可编辑的 div 内容）。

要禁用不是“真实”输入元素的元素，可以使用$("selector").children().css({pointerEvents: "none"}); 这只会阻止该元素和子元素上的所有事件，无论绑定了事件处理程序。

恢复： $("selector").children().css({pointerEvents: "initial"});

指针事件文档

---

编辑以解决有关键盘事件的评论：

$("selector").children().prop("tabIndex",-1); 将避免使用标签导航来访问<input>或<button> 。

tabindex 文档

但是由于您的元素是<div> ...我真的不认为这是相关的。 但是尝试一下，看看这个附加代码是否真的有必要，并随时为未来的读者发表评论。 ;)