jQuery Selector for All Disabled Form Elements

Targeting disabled form controls in jQuery is achieved using the :disabled pseudo-class selector. This article explains how to implement the $(':disabled') selector to target, style, or manipulate non-interactive form controls such as inputs, buttons, textareas, and select menus across your web pages.

The :disabled Selector

To select every disabled element on a page, use the universal :disabled selector:

$(':disabled')

This selector matches all elements that possess the HTML disabled attribute or have their disabled property set to true. It primarily applies to standard form elements, including <input>, <textarea>, <select>, <button>, <option>, and <optgroup>.

Scoping the Selector to Specific Form Controls

While $(':disabled') queries the entire DOM for any disabled tag, you can scope the query to specific element types or parent containers to improve performance and precision:

• Target only disabled text inputs:

  $('input[type="text"]:disabled')

• Target all disabled inputs and buttons:

  $('input:disabled, button:disabled')

• Target disabled controls within a specific form:

  $('#myForm :disabled')

Practical Examples

1. Enabling Disabled Elements

To find all disabled elements within a form and enable them dynamically, combine the selector with jQuery's .prop() method:

$('#registration-form :disabled').prop('disabled', false);

2. Counting Disabled Fields

To check how many fields in a form are currently inactive:

let disabledCount = $('form :disabled').length;
console.log('Disabled elements: ' + disabledCount);

3. Styling or Modifying Attributes

To apply custom styles or classes directly to disabled controls:

$(':disabled').addClass('inactive-field');

Performance Consideration

Because :disabled is a jQuery-specific pseudo-selector, it bypasses native browser querySelectorAll() implementations when used alone. To achieve the fastest query execution, qualify the selector with an HTML tag name (e.g., $('input:disabled')) or use CSS-compliant attribute selectors like $('input[disabled]').