如何使用 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> ...我真的不認為這是相關的。 但是嘗試一下，看看這個附加代碼是否真的有必要，並隨時為未來的讀者發表評論。 ;)