jQuery :disabled Selector

What Is :disabled?

:disabled (since jQuery 1.0) selects form controls that are actually disabled right now. It is a standard CSS pseudo-class. Official docs note it is subtly different from [disabled], which only checks whether the attribute exists in the markup.

$("input:disabled")     // disabled inputs
$("button:disabled")    // disabled buttons
$("#form :disabled")    // any disabled control in a form

// :disabled  → actually disabled (live state)
// [disabled] → has a disabled attribute in markup

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

How to Use :disabled

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

1. Prefer $("input:disabled") or $("#form :disabled") over bare $(":disabled").
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. Change state with .prop("disabled", true|false), not .attr().
5. Remember :disabled ≠ [disabled] when fieldsets inherit disabled state.

Pseudocode

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

return matches

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

Cheat Sheet

Keep these facts handy while working with disabled controls.

Live Preview

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

$("input:disabled").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:disabled").val("this is it");

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

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

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

Disabled: 2
Enabled: 2

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

:disabled → 2
[disabled] → 1
(fieldset-disabled child has no own attribute)

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

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

Click Lock → Disabled count: 1
Click Unlock → Disabled count: 0

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

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

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

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