jQuery :disabled选择器：精准定位所有禁用的表单元素-代码号

在表单设计中，将某些字段设为禁用状态是引导用户正确填写的常用手段。jQuery 的 :disabled 选择器专门用于筛选这些不可交互的元素。它是 :enabled 的镜像选择器，两者覆盖的元素互补——一个负责可用，一个负责禁用。

:disabled 同样只能作用于原生支持 disabled 属性的 HTML 元素，包括 <input>、<textarea>、<button>、<option>、<fieldset>、<optgroup>、<select> 和 <menuitem>。在这些元素上设置 disabled="disabled" 后，用户无法编辑或点击它们，:disabled 就能一次性地把它们全部选中。

为什么我在表单调试阶段频繁使用 :disabled 而不是手动逐个检查？

一个包含几十个字段的表单，在业务逻辑比较复杂时，某些字段会因为前置条件不满足而被动态禁用。排查哪些字段当前处于禁用状态时，在控制台输入 $(":disabled") 可以立刻看到所有禁用元素的列表，比用开发者工具逐个检查属性快得多。这个即时反馈在日常开发和调试中很实用。

语法

// 选择页面中所有禁用的表单元素
$(":disabled")

// 选择特定类型的禁用元素
$("button:disabled")
$("input:disabled")
$("textarea:disabled")

与 :enabled 一样，在 :disabled 前加上元素类型前缀可以缩小筛选范围，只获取指定类型下的禁用项。

课程知识要点

与 :enabled 互为补集：同一组表单元素中，:enabled 和 :disabled 分别覆盖可用和禁用两个互斥子集，联合使用可以覆盖全部元素。
只适用于表单元素：普通 HTML 标签不支持 disabled 属性，使用此选择器无法匹配。
类型前缀精准筛选：$("input:disabled") 只选中被禁用的输入框，不会把禁用的按钮或下拉框也带进来。
动态状态实时反映：元素被启用或禁用后，:disabled 的匹配结果会立即更新，适合在联动表单中做状态感知。

示例一：高亮所有禁用字段

这个例子展示了一个用户信息表单，其中部分字段被设为禁用。点击按钮后，所有禁用的表单元素会统一应用高亮样式，让用户一目了然地看到哪些字段无需填写。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>:disabled 选择器示例 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: sans-serif;
            margin: 30px;
        }
        form div {
            margin-bottom: 12px;
        }
        label {
            display: inline-block;
            width: 90px;
        }
    </style>
</head>
<body>
    <h2>jQuery :disabled 选择器——高亮禁用字段</h2>
    <form action="#">
        <div>
            <label>姓名：</label>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <label>工号：</label>
            <input type="text" disabled="disabled" value="系统自动分配">
        </div>
        <div>
            <label>邮箱：</label>
            <input type="text" placeholder="请输入邮箱">
        </div>
        <div>
            <label>座机：</label>
            <input type="text" disabled="disabled" value="已停用">
        </div>
        <div>
            <label>手机号：</label>
            <input type="text" placeholder="请输入手机号">
        </div>
        <button type="button" id="btn-highlight">高亮禁用字段</button>
        <button type="button" disabled="disabled">重置（不可用）</button>
    </form>

    <script>
        $(document).ready(function () {
            $("#btn-highlight").click(function () {
                // 选中所有禁用的表单元素
                $(":disabled").css({
                    "background-color": "#fce8e6",
                    "border": "2px dashed #d93025"
                });
            });
        });
    </script>
</body>
</html>

点击按钮后，工号字段、座机字段和“重置”按钮会应用红色虚线边框和浅红背景。可用的姓名、邮箱、手机号字段以及“高亮禁用字段”按钮自身不受影响。

示例二：仅高亮禁用的文本域

有时你只关心某一类特定元素的禁用状态。下面的表单中混杂了多种被禁用的控件，但选择器只针对 textarea 类型做样式处理。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>:disabled 指定类型筛选 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: sans-serif;
            margin: 30px;
        }
        form div {
            margin-bottom: 12px;
        }
        label {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    <h2>jQuery :disabled 选择器——仅高亮禁用文本域</h2>
    <form action="#">
        <div>
            <label>姓名：</label>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <label>备用姓名：</label>
            <input type="text" disabled="disabled" value="暂不可用">
        </div>
        <div>
            <label>个人简介：</label>
            <textarea disabled="disabled">该模块维护中，暂不可编辑</textarea>
        </div>
        <div>
            <label>学历：</label>
            <select disabled="disabled">
                <option>高中</option>
                <option>本科</option>
                <option>硕士</option>
            </select>
        </div>
        <button type="button" id="btn-highlight">高亮禁用文本域</button>
        <button type="button" disabled="disabled">重置</button>
    </form>

    <script>
        $(document).ready(function () {
            $("#btn-highlight").click(function () {
                // 仅在 textarea 中筛选被禁用的
                $("textarea:disabled").css({
                    "background-color": "#fce8e6",
                    "border": "2px dashed #d93025"
                });
            });
        });
    </script>
</body>
</html>

点击按钮后，只有“个人简介”文本域被高亮。禁用的输入框、禁用的下拉框以及禁用的按钮都不受影响，因为选择器限定了 textarea 类型。

在项目中，:disabled 和 :enabled 常常成对出现。一个常见的场景是表单提交前的预处理：先对可用字段做校验，再对禁用字段做数据补全或标记。例如：

// 校验所有可用输入框
$("input:enabled").each(function () {
    // 验证逻辑
});

// 为所有禁用字段添加统一的只读标记样式
$(":disabled").addClass("field-readonly");

另外需要注意一点：:disabled 选中的是属性层面被禁用的元素，而用户不能交互不代表元素一定带有 disabled 属性——比如 readonly 也会限制输入但不会让元素匹配 :disabled。如果你需要同时覆盖 disabled 和 readonly 两种不可编辑状态，需要额外加上 [readonly] 属性选择器来组合使用。

在联动表单的开发中，:disabled 的动态特性尤其有用。举个例子，当用户在一个下拉框里选择了“其他”选项后，旁边的文本框才被启用。在调试这类逻辑时，用 $("input:disabled") 和 $("input:enabled") 分别在控制台查看两组元素，可以直观地验证联动规则是否正确触发，比打断点或在代码里加 console.log 更直接。

本文标签：