HTML disabled 属性

HTML disabled 语法

在 HTML 中，disabled 属性用于禁用各种表单元素，包括文本框、单选按钮、复选框等。当元素被禁用时，用户将无法与其交互。

只有以下元素支持 disabled 属性。

语法：

<element disabled>

说明：

element 是被禁用的表单元素。disabled 是一个布尔属性。在 HTML5 标准中，下面 2 种写法是等价的。

<!--写法1-->
<element disabled>

<!--写法2-->
<element disabled="disabled">

disabled 属性主要作用有以下 3 个。

防止用户在表单未完成时提交表单：可以禁用表单的某些输入项，防止用户在表单未完成时进行提交
禁用已过期的选项或功能：在某些情况下，某些功能或选项可能不再可用，禁用这些元素可以防止用户使用。
根据条件动态启用或禁用元素：比如可以通过 JavaScript 根据用户输入或其他条件来动态启用或禁用表单元素，从而提供更好的交互体验。

需要注意的是，被禁用的元素（disabled）的值不会被提交到服务器。如果只是希望让用户看到数据但不可修改，同时又希望在提交表单时把这个数据发送给服务器，我们应该使用 readonly 属性，而不是 disabled 属性。

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。这些属性不需要显式赋值（如 true 或 false），只要属性名存在即可。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML disabled 摘要

适用元素	input、textarea、button、select、fieldset、optgroup、option
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML disabled 示例

接下来，我们通过几个简单的例子来讲解一下 HTML disabled 属性是如何使用的。

示例 1：disabled 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>处于启用状态：<input type="text"></p>
    <p>处于禁用状态：<input type="text" disabled></p>
</body>
</html>

页面效果如下图所示。

HTML disabled示例效果1

分析：

在上面例子中，我们使用 disabled 属性定义第 2 个 input 元素为禁用状态，此时会发现该文本框是无法输入内容的。

示例 2：JavaScript 动态修改 disabled 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input id="txt" type="text">
    <button id="btn">禁用</button>
    <script>
        const oTxt = document.getElementById("txt");
        const oBtn = document.getElementById("btn");

        oBtn.addEventListener("click", function() {
            oTxt.disabled = true;
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当单击【禁用】按钮之后，页面效果如下图 2 所示。

HTML disabled示例效果2

HTML disabled示例效果3

示例 3：fieldset 标签使用 disabled

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <fieldset disabled>
            <legend>登录绿叶网</legend>
            <p>
                <label>账号：<input type="text" name="name"></label>
            </p>
            <p>
                <label>密码：<input type="password" name="password"></label>
            </p>
            <p>
                <label><input type="checkbox" name="remember-me">记住我</label>
                <button type="submit">登录</button>
            </p>
        </fieldset>
    </form>
</body>
</html>

页面效果如下图所示。

HTML fieldset标签使用 disabled 属性

分析：

如果我们给 fieldset 元素上设置 disabled 属性，此时它内部的所有表单元素都会被一键禁用，这种方式非常适合批量控制表单区域。

disabled vs readonly

disabled 和 readonly 这两个属性非常相似，但它们之间是存在本质上的区别的：

disabled（禁用）：元素完全不可用（无法点击或聚焦），且在提交表单时不会发送该元素的值。
readonly（只读）：元素内容不可修改但可以选中复制（可以聚焦），且在提交表单时会正常发送该元素的值。