HTML | DOM 选择禁用属性

在HTML中，除了常见的属性（如 id、class、style 等），还有一些属性可以用来禁用或者使表单元素只读。这些属性对于构建更安全、更符合用户体验的表单页面非常有用。

禁用属性

使用禁用属性可以使表单元素失效，用户无法对其进行编辑或交互。这对于一些暂时不需要用户编辑或者需要限制用户操作的表单元素非常有用，例如登录页面中的验证码输入框。

在HTML中，可以使用 disabled 属性来禁用表单元素，例如：

<input type="text" name="username" disabled>

上面的代码会生成一个文本框，但是用户无法编辑或者选中其中的内容。

只读属性

和禁用属性不同，只读属性仅仅是限制了用户不能编辑表单元素，但是用户可以选中其中的内容，这在表单元素中展示一些信息非常有用，例如嵌入在表单中的说明文本。

在HTML中，可以使用 readonly 属性来只读表单元素，例如：

<input type="text" name="country" value="China" readonly>

上面的代码会生成一个文本框，其中的内容为 China，但是用户无法编辑其中的内容。

JavaScript中选择禁用属性

我们可以通过JavaScript来选择和操作禁用属性或只读属性。

选择禁用元素

可以使用 querySelector 和 getElementById 等方法来选择禁用元素。例如：

// 选择name为username的禁用元素
document.querySelector('input[name="username"][disabled]');

上面的代码会选择name为 username 的禁用元素。

删除禁用属性

可以使用 removeAttribute 方法删除元素的禁用属性。例如：

// 删除name为password的文本框的禁用属性
document.querySelector('input[name="password"]').removeAttribute('disabled');

上面的代码会删除name为 password 的文本框的禁用属性，使其变成可编辑状态。

添加禁用属性

可以使用 setAttribute 方法来添加禁用属性。例如：

// 添加name为submit的提交按钮的禁用属性
document.querySelector('input[name="submit"]').setAttribute('disabled', true);

上面的代码会添加name为 submit 的提交按钮的禁用属性，使其无法被点击。