数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
