jQuery :enabled Selector

What You’ll Learn

The :enabled selector matches form elements that are currently enabled — interactive and editable by the user. Available since jQuery 1.0; it is the complement of :disabled.

Introduction

Most form workflows need to target controls the user can actually interact with — editable text fields, clickable buttons, and selectable options. jQuery’s :enabled pseudo-class selects those elements in one pass.

Official jQuery documentation recommends prefixing with a tag or scoped selector — $("input:enabled") instead of bare $(":enabled"), which implies $("*:enabled") and scans every element type. Although results are usually similar, :enabled is subtly different from :not([disabled]) when fieldsets or dynamic state are involved.

Understanding the :enabled Selector

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

• <input type="text"> → matches input:enabled.
• <input disabled> → no match for :enabled.
• Input inside a disabled <fieldset> → no match (inherits disabled state).
• button:enabled, select:enabled, textarea:enabled — same pattern.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":enabled" )



// recommended — prefix with element type:

$( "input:enabled" )

$( "button:enabled" )

$( "#signupForm input:enabled" )

$( "select:enabled" )

Parameters

• No arguments — filters by current enabled DOM state (disabled property strictly false).

Return value

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

Official jQuery API example

// Finds all input elements that are enabled

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

Examples Gallery

Example 1 follows the official jQuery input:enabled demo. Examples 2–5 compare with :not([disabled]), count enabled fields, style buttons, and collect values from editable inputs only. Use the Try-it links to run each snippet.

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



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

Enabled inputs → value "this is it"

Disabled input → unchanged ("locked")

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

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



// Fieldset-disabled input: not :enabled; may still match :not([disabled])

:enabled → 1 (standalone enabled input)

:not([disabled]) → 2 (includes fieldset child without attribute)

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

$( "#enabledCount" ).text( n + " editable field(s)" );

2 enabled inputs → "2 editable field(s)"

$( "button:enabled" ).addClass( "btn-active" );



// Disabled Submit stays unstyled — enabled buttons get btn-active

Submit and Cancel → btn-active class

Disabled Locked button → unchanged

var data = {};

$( "#profileForm input:enabled" ).each( function() {

  data[ $( this ).attr( "name" ) ] = $( this ).val();

});

console.log( data ); // user and email only — secret skipped

{ user: "alex", email: "alex@example.com" }

Disabled "secret" field excluded

🚀 Common Use Cases

• Form validation — validate only input:enabled fields the user can edit.
• Submit gating — enable styling on button:enabled when the form is ready.
• Wizard steps — collect values from the active step’s enabled controls.
• Bulk disable — after locking the form, verify :enabled returns empty.
• Accessibility audit — list controls that should be enabled but are not.
• Compare state — verify :enabled vs :not([disabled]) after dynamic updates.

📝 Notes

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

💡 Best Practices