Javatpoint Logo
Javatpoint Logo

jquery :enabled selector

The :enabled selector is used to select all enabled form elements. It is a pseudo-class selector that can also be used to style the enabled UI elements. By default, the form elements are in an enabled state. If some of the form elements are disabled, then using the :enabled selector, we can highlight the enabled 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 $(''*:enabled'') that selects all enabled form elements.

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

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

Example1

In this example, we are styling all enabled form elements using the :enabled selector. Here, there is a form, including some disabled and enabled elements.

We have to click the given enabled button to see the effect. On clicking the button, the selector will highlight all enabled elements.

Test it Now

Output:

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

jquery :enabled selector

After clicking the given button, the output will be -

jquery :enabled selector

Example2

In this example, we are styling the particular type of enabled elements using the :enabled selector. Here, there is a form, including some disabled and enabled elements. Although multiple elements are enabled, but the program will only highlight the enabled textarea.

We have to click the given enabled button to highlight the textarea. 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 highlighted.

Test it Now

Output:

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

jquery :enabled selector

After clicking the given button, the output will be -

jquery :enabled 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