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.

<!DOCTYPE html>
<html>

<head>
<title> jQuery :enabled selector </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$('button').click(function(){
$(":enabled").css({"background-color": "yellow", "border": "2px dashed blue"});
});
});
</script>

</head>

<body>
<form action = "#">
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of using jQuery :enabled selector </h2>

<div>
First name: ��� <input type = "text"> <br/> <br/>
Middle name: <input type = "text" disabled = "disabled"> <br/>  <br/>
Last name:  ��� <input type = "text"> <br/>  <br/>
Mobile no.:  ���<input type = "text"> <br/>  <br/>
Telephone:  ��� <input type = "text" disabled = "disabled"> <br/> <br/>
<input type = "submit" id = "inp" disabled = "disabled">
<button> Click me </button>
</div>

</form>

</body>

</html>

Test it Now

Output:

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

After clicking the given button, the output will be -

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.

<!DOCTYPE html>
<html>

<head>
<title> jQuery :enabled selector </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$('button').click(function(){
$("textarea:enabled").css({"background-color": "yellow", "border": "2px dashed blue"});
});
});
</script>

</head>

<body>
<form action = "#">
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of using jQuery :enabled selector </h2>

<div>
First name: ��� <input type = "text"> <br/> <br/>
Middle name: <input type = "text" disabled = "disabled"> <br/>  <br/>
Last name:  ��� <input type = "text"> <br/>  <br/>
Mobile no.:  ���<input type = "text"> <br/>  <br/>
About Yourself: <textarea> </textarea> <br/>  <br/>
Qualification: <select>
<option> Xth </option>
<option> XIIth </option>
<option> UG </option>
<option> PG </option>
</select> <br/>  <br/>
<input type = "submit" id = "inp" disabled = "disabled">

<button> Click me </button>
</div>

</form>

</body>

</html>

Test it Now

Output:

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