使用 JavaScript 删除“disabled”属性

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 删除“disabled”属性

作者：迹忆客最近更新：2022/11/27 浏览次数：

要删除 disabled 属性，请选择该元素并对其调用 removeAttribute() 方法，将其作为参数传递给 disabled，例如 btn.removeAttribute('disabled')。 removeAttribute 方法将从元素中删除禁用的属性。

以下是本文示例的 HTML。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button disabled id="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const btn = document.getElementById('btn');

// ✅ Remove disabled attribute from button
btn.removeAttribute('disabled');

// ✅ Add disabled attribute to button
// btn.setAttribute('disabled', '');

我们使用 document.getElementById() 方法选择了按钮。

然后我们使用 removeAttribute 方法从元素中删除禁用的属性。

该方法将要删除的属性作为参数。

如果元素上不存在该属性，则 removeAttribute() 方法不会抛出错误，它会忽略调用。

当设置布尔属性的值时，例如禁用，我们可以为该属性指定任何值，它就会起作用。

如果该属性完全存在，则无论值如何，其值都被认为是真实的。

如果不存在诸如禁用之类的布尔属性，则该属性的值被认为是假的。

如果需要添加属性，可以使用 setAttribute 方法。

const btn = document.getElementById('btn');

// ✅ Remove disabled attribute from button
btn.removeAttribute('disabled');

// ✅ Add disabled attribute to button
btn.setAttribute('disabled', '');

该方法将属性名称作为第一个参数，将应分配给属性的值作为第二个参数。

设置布尔属性时，例如禁用，最好将它们设置为空值。这就是我们在示例中传递一个空字符串作为值的原因。

disabled 属性可以设置为任何值，只要它出现在元素上，它就可以完成工作。

请注意 ，我们应该只对 DOM 元素调用 removeAttribute() 方法。如果需要从元素集合中移除禁用属性，则必须遍历该集合并对每个单独的元素调用该方法。

这是下一个示例的 HTML。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <button disabled class="btn">Button</button>
    <button disabled class="btn">Button</button>
    <button disabled class="btn">Button</button>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const buttons = document.querySelectorAll('.btn');

for (const button of buttons) {
  // ✅ Remove disabled attribute from button
  button.removeAttribute('disabled');
}

我们使用 document.querySelectorAll 方法来选择所有带有 btn 类的元素。

我们使用 for...of 循环遍历集合并从每个元素中删除 disabled 属性。

上一篇：使用 JavaScript 按多个 ID 选择元素

下一篇：使用 JavaScript 删除“require”属性

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：