在純 javascript 中啟用/禁用按鈕

Question

我想在沒有 jquery 的情況下啟用/禁用按鈕。 這是我的代碼：

btn.setAttribute("disabled", true);

作品。 但這不是 - 一個按鈕保持禁用狀態：

btn.setAttribute("disabled", false);

Answer 1

disabled是一個布爾屬性。 無論該屬性的實際值是什么，它的存在都會導致元素被禁用。 這就是為什么您可以通過將屬性設置為true來禁用 JavaScript 中的元素，您可以將其設置為任何內容（這就是為什么將其設置為false它仍然處於禁用狀態的原因）。

 <input type="button" value="I'm disabled" disabled="true"> <input type="button" value="I'm disabled" disabled="false"> <input type="button" value="I'm disabled" disabled="doesn't matter"> <input type="button" value="I'm disabled" disabled="">

使用 Boolean 屬性，您甚至根本不需要為屬性設置 a 值：

 <input type="button" value="I'm disabled" disabled>

然而，推薦的布爾屬性約定（如果你確實想為屬性提供一個值），以便我們在開發人員之間有一些一致性，是將它們的值設置為等於屬性名稱本身。 因此，要在 JavaScript 中通過使用其屬性來禁用元素，請遵循推薦的約定：

element.setAttribute("disabled", "disabled");

因此，要啟用一個元素，您不要將disabled屬性設置為任何值，因為正如我們所見，這只會禁用它，您需要完全刪除disabled屬性：

element.removeAttribute("disabled");

 document.querySelector("input[type='button']").removeAttribute("disabled");

 <input type="button" value="I'm NOT disabled" disabled="disabled">

---

現在，在 JavaScript 中使用 DOM 對象時，有兩種方法可以影響元素的當前狀態，了解使用這兩種技術的效果很重要：

1. 使用元素的當前 HTML 狀態（通過setAttribute() 、 removeAttribute()和getAttribute() ）。
2. 使用元素在內存中的當前 DOM 對象狀態（通過代表當前狀態的 JavaScript 屬性完成）。

最重要的是， JavaScript 對象屬性值可以與HTML 元素屬性值不同。 這可能會令人困惑，但 HTML 狀態是元素從外部看起來的樣子，屬性狀態是內部真正發生的事情，就像你可以裝出一張快樂的臉，這樣看着你的人就會認為你很快樂（ HTML 狀態），但您實際上可能會為真實（屬性狀態）感到難過。

當尚未設置屬性狀態時，屬性狀態才是最重要的，並且將完全控制元素的狀態。 設置屬性狀態后，它會覆蓋可能是的屬性狀態並控制元素的實際狀態。

 // Get a reference to the button var btn = document.querySelector("[type=button]"); // Test what the current HTML state is: console.log(btn.getAttribute("disabled")); // Test what the current mapped property state is: console.log(btn.disabled); // Change the property state, which will override the HTML state and // and cause it to become enabled. btn.disabled = false; // Test what the current HTML state is: console.log(btn.getAttribute("disabled")); // null because property overrode HTML // Test what the current mapped property value is: console.log(btn.disabled);

 <input type="button" value="I'm disabled" disabled="disabled">

來自MDN ：

要啟用該元素，請完全保留此屬性，而不是將值設置為false 。

Answer 2

 function getElement(elm){ return document.getElementById(elm); } /*-------------FUNCTION TO DISABLE AN TEXT BOX------------------*/ function disable(elm){ return getElement(elm).setAttribute("disabled", true); } //==============================================================// /*--------------FUNCTION TO ENABLE AN TEXT BOX------------------*/ function enable(elm){ return getElement(elm).removeAttribute("disabled"); } //==============================================================// function disableEnable(){ if(getElement("button").disabled){ enable("button"); enable("input-button"); } else{ disable("button"); disable("input-button"); } }

 <button id="button">Button</button> <input id="input-button" type="button" value="Input Button"/> <br/><br/><br/> <button onClick="disableEnable();"> Disable/Enable Buttons Above</button>

Answer 3

btn.removeAttribute("disabled");

Answer 4

element.disabled = true
element.disabled = false

這是完全有效的並且可以按您的預期工作 - 即在設置為 true 時不會禁用元素，如已接受的答案所建議的那樣。