jQuery :disabled Selector

What You’ll Learn

The :disabled selector matches form elements that are currently disabled — not editable or clickable by the user. Available since jQuery 1.0; pair with :enabled and use .prop("disabled") to change state.

Introduction

Disabled form controls cannot receive focus or user input — browsers gray them out and skip them on submit (with exceptions for disabled fields that still serialize in some cases). The HTML disabled attribute sets initial state; JavaScript can also toggle disability via the DOM property.

jQuery’s :disabled pseudo-class selects elements that are disabled right now. Official documentation recommends prefixing with a tag or scoped selector — $("input:disabled") instead of bare $(":disabled"), which implies $("*:disabled") and scans every element type.

Understanding the :disabled Selector

Think of :disabled as a live filter on form controls:

• <input disabled> → matches input:disabled.
• Enabled input → no match for :disabled.
• Input inside a disabled <fieldset> → matches :disabled even without its own attribute.
• button:disabled, select:disabled, textarea:disabled — same pattern.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":disabled" )



// recommended — prefix with element type:

$( "input:disabled" )

$( "button:disabled" )

$( "#signupForm input:disabled" )

$( "select:disabled" )

Parameters

• No arguments — filters by current disabled DOM state.

Return value

• A jQuery object containing every disabled element in the search context.
• Empty collection when nothing is disabled.

Official jQuery API example

// Finds all input elements that are disabled

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

Examples Gallery

Example 1 follows the official jQuery input:disabled demo. Examples 2–5 compare with [disabled], count disabled fields, style buttons, and re-enable controls with .prop(). Use the Try-it links to run each snippet.

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



// Only disabled inputs change — enabled inputs keep their values

Disabled inputs → value "this is it"

Enabled input → unchanged

console.log( ":disabled →", $( "input:disabled" ).length );

console.log( "[disabled] →", $( "input[disabled]" ).length );



// Fieldset-disabled input matches :disabled, not always [disabled]

:disabled → 2 (explicit + fieldset child)

[disabled] → 1 (explicit attribute only)

var n = $( "#signupForm input:disabled" ).length;

$( "#disabledCount" ).text( n + " field(s) disabled" );

2 disabled inputs → "2 field(s) disabled"

$( "button:disabled" ).addClass( "btn-muted" );



// Submit disabled until form valid — style the inactive state

Disabled Submit button → btn-muted class

Enabled Cancel button → unchanged

$( "#unlock" ).on( "click", function() {

  $( "#signupForm input:disabled" ).prop( "disabled", false );

});



// :disabled finds; .prop() changes state

Click Unlock → disabled inputs become editable

Re-query :disabled → empty collection

🚀 Common Use Cases

• Form validation — count or highlight input:disabled vs editable fields.
• Submit gating — style button:disabled until the form is valid.
• Wizard steps — disable fields in inactive steps; query with scoped :disabled.
• Bulk unlock — select disabled set, then .prop("disabled", false).
• Accessibility audit — list controls that are disabled unexpectedly.
• Compare state — verify :disabled vs [disabled] after dynamic updates.

📝 Notes

• Available since jQuery 1.0 — matches current disabled state.
• Use on button, input, select, textarea, optgroup, option, fieldset, menuitem only.
• Prefer input:disabled over bare $(":disabled") (implies *:disabled).
• :disabled vs [disabled] — live property vs attribute presence (official docs).
• Use .prop("disabled") to read or set state — not .attr("disabled").
• Re-query after toggling — the matched set changes when controls are enabled.

💡 Best Practices