javascript - 如何使用 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(还有其他感兴趣的事件，而不仅仅是点击)，持续时间为一个请求，一旦单击一个 div，这就是为什么我尝试暂时禁用它们，并在收到响应后再次重新启用它们。

Answer 1

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

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

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

pointer-events documentation

---

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

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

tabindex documentation

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