jQuery :enabled Selector

What Is :enabled?

:enabled (since jQuery 1.0) selects form controls that are currently enabled — interactive, with disabled === false. It is a standard CSS pseudo-class and the natural partner of :disabled.

$("input:enabled")      // interactive inputs
$("button:enabled")     // clickable buttons
$("#form :enabled")     // enabled controls in a form

// :enabled          → disabled property === false
// :not([disabled])  → no disabled attribute in markup

// Toggle with .prop("disabled", false|true)

How to Use :enabled

Prefix with a tag or form context, then read or update the enabled set.

1. Prefer $("input:enabled") or $("#form :enabled") over bare $(":enabled").
2. Use it on elements that support disabled (input, button, select, textarea, …).
3. Re-query after toggles — state is live, not a one-time snapshot of HTML.
4. Enable with .prop("disabled", false); disable with .prop("disabled", true).
5. Remember :enabled ≠ :not([disabled]) when fieldsets inherit disabled state.

Pseudocode

matches = []
for each element in search context:
    if element supports disabled
       and element.disabled === false:   // live property
        matches.add(element)

return matches

// :not([disabled]) only checks: !hasAttribute("disabled")

Cheat Sheet

Keep these facts handy while working with enabled controls.

Live Preview

Toggle which fields are disabled, then run $("input:enabled").

$("input:enabled").length
→ 2

matched → a=alpha, c=charlie

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("input:enabled").val("this is it");

var lines = [];
$("input").each(function () {
  lines.push(this.name + " = " + this.value +
    (this.disabled ? " [disabled]" : " [enabled]"));
});
$("#out").text(lines.join("\n"));

a = this is it [enabled]
b = none [disabled]
c = this is it [enabled]
d = none [disabled]

$("#out").text(
  "Enabled: " + $("input:enabled").length + "\n" +
  "Disabled: " + $("input:disabled").length
);

Enabled: 2
Disabled: 2

$("#out").text(
  ":enabled → " + $("#box input:enabled").length + "\n" +
  ":not([disabled]) → " + $("#box input:not([disabled])").length
);

:enabled → 1
:not([disabled]) → 2
(fieldset child has no attribute but is not enabled)

$("#enable").on("click", function () {
  $("#name").prop("disabled", false);
  $("#out").text("Enabled count: " + $("input:enabled").length);
});

$("#disable").on("click", function () {
  $("#name").prop("disabled", true);
  $("#out").text("Enabled count: " + $("input:enabled").length);
});

Start disabled → Enabled count: 0
Click Enable → Enabled count: 1
Click Disable → Enabled count: 0

var n = $("#signup :enabled").length;
var all = $(":enabled").length;

$("#out").text(
  "Inside #signup: " + n + "\n" +
  "Whole page (avoid bare): " + all
);

Inside #signup: 2
Whole page (avoid bare): 3

Performance Notes

Cost is rarely the issue on small forms. Prefixing and scoping matter more for clarity and on pages with many controls.

Key Takeaways