How to Use :Disabled Selector in jQuery With Code Example

:Disabled Selector in jQuery

A specialised form selector in jQuery, the :disabled selector is used to target and work with HTML form components that are disabled. You can use this selection to style, edit, or collect data from form fields that are not currently in use, which is especially helpful when dealing dynamically with user interfaces.

What is the Selector?

To find form elements that are currently disabled, use the :disabled selector. The disabled attribute in HTML allows a form element to be rendered non-interactive and frequently visually distinct. With the help of this selector, jQuery may quickly choose these particular items.

Syntax:

Using the :disabled selector is as simple as using the normal jQuery pattern: $(selector).action(). Targeting disabled items would entail using:

$(':disabled')

The colon (:) in JQuery selectors indicates pseudo-classes, which identify an element’s unique state or feature instead of its name. To specify an element, add its tag name to :disabled. $(‘input:disabled’) selects disabled buttons and fields.

How it Works

The :disabled selector filters matched components using jQuery CSS3 selector-like principles. A form element (e.g., input, textarea, select, or button) is checked for disabled property or browser/script display. Thus, you can operate on non-interactive areas for visual cues, conditional logic, or user input.

For example, you might use it to:

A specific style indicates a field is disabled and cannot be interacted with.
Stop form submissions if any fields are blank.
In order to debug or analyse a page, note which elements are disabled.

Code Example

To highlight all disabled form elements on a web page, use the :disabled selector, as shown in this little code example:

<!DOCTYPE html>
<html>
<head>
  <title>:disabled Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .highlight { background: pink ; }
  </style>
</head>
<body>
<form>
  <input type="text" id="name" placeholder="Name"><br><br>
  <input type="password" id="pass" placeholder="Password" disabled><br><br>
  <button id="submitBtn" disabled>Submit</button>
</form>
<br>
<button id="showDisabled">Show Disabled</button>
<button id="togglePass">Toggle Password</button>
<div id="info"></div>
<script>
  $(function () {
    $('#showDisabled').click(function () {
      $(':disabled').addClass('highlight');
      $('#info').html('');
      $(':disabled').each(function () {
        $('#info').append(`<p>${this.tagName} #${this.id} is disabled</p>`);
      });
    });
    $('#togglePass').click(function () {
      let field = $('#pass');
      field.prop('disabled', !field.prop('disabled')).toggleClass('highlight');
    });
  });
</script>
</body>
</html>

Output:

Name
Password

Submit

Show Disabled       Toggle Password
INPUT #pass is disabled
BUTTON #submitBtn is disabled

Explanation of the Example

HTML Structure: The HTML contains buttons, input fields, and select dropdowns, among other form elements. Inactive elements are those that have the disabled attribute applied to them. A.highlight-disabled CSS class is defined for visual emphasis by a simple <style> block.

jQuery Integration: Using jQuery functions requires connecting the library in the <script> tag in the <body> or <head>.

$(document).ready(): The package $(document).ready(function() {… }); contains the JavaScript code. The contained code is only run when the complete page has loaded and the Document Object Model (DOM) has been properly created with this essential jQuery technique. Errors may result from attempting to modify DOM elements before they are completely loaded.

Selecting Disabled Elements: In order to select disabled elements, enter $(‘:disabled’) inside the ready() function.It is the main line addClass(‘highlight-disabled’);.

As a selector, $(‘:disabled’) highlights all disabled elements in the <body> .
After selecting these components, the action.addClass(‘highlight-disabled’) is executed. For every disabled element that is chosen, this function dynamically applies the CSS class highlight-disabled. The border and background colour become apparent as a result, emphasising the disabled fields.

Conclusion

In conclusion, the jQuery :disabled selector provides a strong and fast tool for finding and interacting with disabled form items. Developers can simply apply styles, extract data, and control user interaction in web forms. It helps create responsive and interactive user interfaces by dynamically reflecting element state changes. Using :disabled with jQuery methods like.prop(),.addClass(), and.each(), the simplified example highlights disabled items, toggles their state, and displays their details in real time. The :disabled selector is crucial for managing form behaviours and improving user experience in modern web apps.

Page Content

Tutorials