資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 移除 HTML 輸入元素的“disabled”屬性？
在 HTML 中，我們可以使用 input 元素透過建立表單或其他方式來獲取使用者的輸入。input 元素有多種型別，例如複選框、單選按鈕、文字、數字等。
我們可以對每個元素使用“disabled”屬性來停用輸入欄位並阻止使用者與輸入元素互動。在某些情況下，我們需要使用 JavaScript 新增和移除 disabled 屬性。例如，我們希望獲取年齡大於 18 歲的使用者的身份證號碼。因此，我們需要僅當用戶輸入的年齡大於 18 時才啟用身份證號碼輸入欄位，方法是使用 JavaScript 移除 disabled 屬性。
在這裡，我們將學習使用 JavaScript 從 HTML 輸入元素移除 disabled 屬性的各種方法。
使用 removeAttribute() 方法
在第一種方法中，我們將使用 removeAttribute() 方法移除 disabled 屬性。它用於移除我們作為方法引數傳遞的 HTML 元素的任何屬性。
語法
使用者可以按照以下語法使用 removeAttribute() 方法從 input 元素中移除“disabled”屬性。
element.removeAttribute("disabled");
在上面的語法中，我們將屬性名稱“disabled”作為方法的引數傳遞。
示例
在下面的示例中，我們在 HTML 部分定義了文字輸入欄位。每當使用者點選按鈕時，它都會呼叫 removeDisabled() 函式。
在 remvoeDisabled() 函式中，我們透過其 id 訪問 input 元素。之後，我們透過將 input 元素作為引用並傳遞“disabled”作為引數來執行 removeAttribute() 方法。
在輸出中，使用者可以觀察到，在點選按鈕之前他們無法與 input 元素互動，但在點選按鈕之後他們可以互動。
<html>
<body>
<h3> Using the <i> removeAttribute() </i> method to remove disabled attribute from HTML input element </h3>
<input type = "text" name = "first name" id = "name" value = "Shubham" disabled>
<button onclick = "removeDisabled()"> Remove Disabled </button>
<script>
function removeDisabled() {
let name = document.getElementById("name");
name.removeAttribute("disabled");
}
</script>
</html>
修改“disabled”屬性
在這種方法中，我們將修改“disabled”屬性的值，而不是從 HTML 元素中移除 disabled 屬性。“disabled”屬性採用布林值。disabled 屬性的預設值為“true”，但我們可以將其設定為“false”，它將與我們從任何 input 元素中移除“disabled”屬性的效果相同。
語法
使用者可以按照以下語法將 disabled 屬性的值修改為 false。
input.disabled = false;
示例 1
在下面的示例中，我們建立了多個文字 input 元素，預設情況下都處於停用狀態。在 JavaScript 中，我們訪問所有 input 元素並使用 forEach() 方法對 input 的節點列表進行迭代。在 forEach() 方法內部，我們將每個 input 的 disabled 屬性的值修改為 false。
在輸出中，使用者可以觀察到，點選按鈕後所有 input 元素都可互動。
<html>
<body>
<h3> setting the <i> disable property value </i> to remove disabled attribute from HTML input element </h3>
<!-- creating multiple text inputs -->
<input type = "text" id = "myText" value = "Hello World!" disabled> <br> <br>
<input type = "text" id = "second" value = "How are you?" disabled>
<button onclick = "removeDisabled()"> Remove Disabled </button>
<script>
function removeDisabled() {
let textsInput = document.querySelectorAll("input[type='text']");
textsInput.forEach((input) => {
input.disabled = false;
});
}
</script>
</html>
示例 2
在下面的示例中，我們建立了多個複選框輸入並向所有複選框添加了 disabled 屬性以停用它們。在 removeDisable() 函式中，我們訪問所有複選框並修改每個複選框的“disabled”屬性。
<html>
<body>
<h3> Setting the <i> disable property value </i> to remove disabled attribute from HTML input element.</h3>
<!-- creating multiple checkboxes -->
<input type = "checkbox" value = "male" disabled> male
<input type = "checkbox" value = "female" disabled> female
<input type = "checkbox" value = "other" disabled> Other
<button onclick = "removeDisabled()"> Remove Disabled </button>
<script>
function removeDisabled() {
let checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].disabled = false;
}
}
</script>
</html>
我們學習瞭如何使用 JavaScript 移除 input 元素的 disabled 屬性。在第一種方法中，我們使用了 removeAttribute() 方法，該方法會移除 input 元素的 disabled 屬性。在第二種方法中，我們修改了 disabled 屬性的值而不是將其從 HTML 元素中移除，但我們能夠實現啟用 input 元素的目標。
3K+ 瀏覽量
