极客笔记JavaScript 如何从HTML输入元素中移除”disabled”属性
在HTML中，我们可以使用输入元素来从用户那里获取输入，可以通过创建表单或以其他方式实现。有不同类型的输入元素，例如复选框、单选按钮、文本、数字等。
我们可以使用”disabled”属性来禁用输入字段，并阻止用户与输入元素进行交互。在某些情况下，我们需要使用JavaScript添加和移除”disabled”属性。例如，我们想要获取年龄大于18岁的用户的身份证号码。因此，我们只有在用户输入大于18的年龄时，通过移除JavaScript的disabled属性才能启用身份证输入字段。
在这里，我们将学习使用JavaScript从HTML输入元素中移除”disabled”属性的各种方法。
使用removeAttribute()方法
在第一种方法中，我们将使用removeAttribute()方法来移除”disabled”属性。它用于从我们作为方法参数传递的HTML元素中移除任何属性。
语法
用户可以按照下面的语法使用removeAttribute()方法来从输入元素中移除”disabled”属性。
element.removeAttribute("disabled");
在上述语法中，我们将属性名称 ‚Äòdisabled‚Äô 作为方法的参数进行传递。
示例
在下面的示例中，我们在HTML部分定义了文本输入框。当用户点击按钮时，它会调用 removeDisabled() 函数。
在 removeDisabled() 函数中，我们通过其id访问输入元素。然后，我们通过将输入元素作为参考并将 ‚Äòdisabled‚Äô 作为参数传递来执行 removeAttribute() 方法。
在输出中，用户可以观察到在点击按钮之前无法与输入元素进行交互，但在点击按钮后可以与其交互。
<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”，它的作用与删除任何输入元素的“disabled”属性相同。
语法
用户可以按照下面的语法将disabled属性的值修改为false。
input.disabled = false;
示例1
在下面的示例中，我们创建了多个文本输入元素，默认情况下都被禁用。在JavaScript中，我们访问所有输入元素，使用forEach()方法对输入的节点列表进行迭代。在forEach()方法内部，我们将每个输入的disabled属性的值修改为false。
在输出中，用户可以看到在点击按钮后，所有输入元素都是可交互的。
<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移除输入元素的disabled属性。在第一种方法中，我们使用了removeAttribute()方法，它可以将disabled属性从输入元素中删除。在第二种方法中，我们修改了disabled属性的值，而不是从HTML元素中删除它，但我们可以实现我们让输入元素可用的目标。