jQuery :enabled选择器：精准选中所有可用表单元素-代码号

在表单交互中，区分“可操作”和“不可操作”的元素是一个常见需求。jQuery 提供了 :enabled 伪类选择器，专门用于筛选出当前处于可用状态的表单元素。默认情况下，表单元素都是可用的，但当某些字段被设置了 disabled 属性后，用户就无法与其交互。:enabled 让你能批量定位那些仍然可以正常操作的元素，方便做统一样式处理或逻辑判断。

这个选择器只能作用于原生支持 disabled 属性的 HTML 元素，包括 <input>、<textarea>、<button>、<option>、<fieldset>、<optgroup>、<select> 和 <menuitem>。如果你尝试在 <div> 或 <span> 这类标签上使用 :enabled，将得不到任何匹配结果。

为什么我习惯用 :enabled 而不是手动遍历检查 disabled 属性？

在复杂的表单里，用户可能会根据前面的选择动态启用或禁用某些字段。手动维护一个“当前哪些元素可用”的列表既繁琐又容易与实际 DOM 状态脱节。:enabled 是实时反映 DOM 状态的，调用时它会遍历当前匹配，返回那一刻真正可用的元素。这种即时性在联动表单（如省份-城市级联、条件选项切换）中很有价值。

语法

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

// 选择特定类型的可用元素
$("button:enabled")
$("input:enabled")
$("textarea:enabled")
$("select:enabled")

在 :enabled 前面加上元素标签名作为前缀，可以缩小筛选范围，只获取特定类型下的可用元素。

课程知识要点

实时反映 DOM 状态：:enabled 筛选的是调用当下的实际可用性，与元素是否带有 disabled 属性直接对应。
仅限表单元素：只能用于原生支持 disabled 属性的 HTML 元素，普通标签无效。
类型前缀精筛：$("input:enabled") 比 $(":enabled") 更精确，能避免误选中其他类型的可用元素。
与 :disabled 互为补集：同一个元素中，:enabled 和 :disabled 分别覆盖两个互斥的子集，可以配合使用。

示例一：高亮表单中所有可用的输入字段

这个例子模拟了一个常见的用户信息表单，其中部分字段被禁用。点击按钮后，所有可用字段会被统一样式突出显示，禁用字段保持不变。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>:enabled 选择器示例 · 编程学习</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: 80px;
        }
    </style>
</head>
<body>
    <h2>jQuery :enabled 选择器——高亮可用字段</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" placeholder="已停用">
        </div>
        <div>
            <label>手机号：</label>
            <input type="text" placeholder="请输入手机号">
        </div>
        <button type="button">高亮可用字段</button>
    </form>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                // 选中所有可用的表单元素并应用样式
                $(":enabled").css({
                    "background-color": "#fff3cd",
                    "border": "2px dashed #1a73e8"
                });
            });
        });
    </script>
</body>
</html>

点击按钮后，姓名、邮箱和手机号三个输入框以及按钮自身会被高亮。工号和座机两个字段因为带有 disabled 属性，保持原样不变。通过这个简单的样式切换，用户可以直观看到哪些字段需要填写。

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

当表单中混杂了多种元素类型，但你只关心其中某一类可用元素时，在 :enabled 前加上类型前缀即可精准定位。下面的例子只高亮可用的 <textarea> 元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>:enabled 指定类型筛选 · 编程学习</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 :enabled 选择器——仅高亮可用文本域</h2>
    <form action="#">
        <div>
            <label>姓名：</label>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <label>个人简介：</label>
            <textarea></textarea>
        </div>
        <div>
            <label>学历：</label>
            <select>
                <option>高中</option>
                <option>本科</option>
                <option>硕士</option>
                <option>博士</option>
            </select>
        </div>
        <div>
            <label>备注：</label>
            <textarea disabled="disabled">此项暂不可用</textarea>
        </div>
        <button type="button">高亮可用文本域</button>
    </form>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                // 只在 textarea 中选择可用的
                $("textarea:enabled").css({
                    "background-color": "#fff3cd",
                    "border": "2px dashed #1a73e8"
                });
            });
        });
    </script>
</body>
</html>

点击按钮后，只有“个人简介”对应的文本域被高亮，“备注”文本域因为处于禁用状态不被选中，输入框和下拉框也不受影响。

个人经验与实用建议

在项目中，:enabled 不仅用于样式层面的高亮，也常用于逻辑判断。比如在表单验证时，只对可用字段做校验，跳过被禁用的字段——因为这些字段往往是根据业务规则自动填充或暂不参与提交的。写法大概是：

$("input:enabled").each(function () {
    // 逐字段验证
});

另一个值得留意的点是：动态启用或禁用元素后，:enabled 的匹配结果是实时变化的。如果你在某个事件里禁用了几个字段，随后调用 $(":enabled") 就不会再包含它们。这个行为和页面初次加载时的快照式选择不同，适合用于联动表单的状态检查。

如果你需要同时操作禁用和可用两组元素，把 :enabled 和 :disabled 搭配使用会非常高效：一个负责可用元素的样式，另一个负责禁用元素的样式，两组逻辑互不干扰。比起用 :not(:enabled) 来选禁用元素，直接使用 :disabled 语义更明确，代码的可读性也更好。

本文标签：

jQuery :enabled选择器：精准选中所有可用表单元素

语法

课程知识要点

示例一：高亮表单中所有可用的输入字段

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

个人经验与实用建议

感谢您的认可和支持