Javatpoint Logo
Javatpoint Logo

jQuery :disabled selector

The :disabled selector is used to select all disabled form elements. It is a pseudo-class selector that can also be used to style the disabled UI elements. This selector can only be used for the HTML elements that support the disabled attribute that are <input>, <textarea>, <button>, <option>, <fieldset>, <optgroup>, <select>, and <menuitem>.

Syntax

The above syntax is similar to the $(''*:disabled'') that selects all disabled form elements.

If we have to select particular disabled elements, we can filter the elements by prefixing the selector with element type or the component name. Suppose we have to only select the disabled button elements, then it can be written as follows.

Let's see some of the illustrations of using the :disabled selector.

Example1

In this example, we are styling all disabled form elements using the :disabled selector. Here, there is a form including some disabled text fields and buttons. The selector will find all disabled elements and apply style to them.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery :disabled selector

After clicking the given button, the output will be -

jQuery :disabled selector

Example2

In this example, we are styling the particular type of disabled elements using the :disabled selector. Here, there is a form including some disabled elements such as textfields, textarea, and buttons. Although multiple elements are disabled, the program will only style the disabled textarea.

The form includes two buttons, one is disabled, and the other is enabled. We have to click the enabled button to style the disabled textarea element. There is a single textarea element, so it will select the single element. But if there are multiple textarea elements, then all textarea elements will get styled.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery :disabled selector

After clicking the given button, the output will be -

jQuery :disabled selector




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA