Updated April 10, 2023
Introduction to jQuery enabled
The jQuery enabled selector is used to select all the enabled form elements. It is a built-in class selector in jQuery, which can also use as a style to enable UI elements. All the form elements by default are enabled. If any of the disabled form elements need to be enabled then by using the enabled selector we can enable it. The HTML elements can use an enabled selector that supports the disabled attribute like button, select, option, optgroup, input, textarea, menuitem, and all.
Syntax:
1. Syntax of jQuery enabled selector.
$(":enabled")2. Syntax of jQuery enabled selector to selects all enabled form elements.
$("*:enabled")3. Syntax of jQuery enabled selector to selects specified enabled form elements.
$("selector : enabled")Parameters:
selector: This is an optional parameter. It specifies the filter expression or elements by prefixing the selector element type.
Return Value:
The return value of this selector is HML selected elements which are support disabled attributes.
Working
- The jQuery enabled selector selects all enabled form elements.
- Suppose we have a form element in the HTML page that contains some form input elements.
- Now we need to highlight all the enabled inputs, so we can use the enabled selector as “$(“input:enabled”).css({“background-color” : “red”);”, which highlights by red background colour to the all enabled inputs.
Examples of jQuery enabled Selector
Given below are the examples mentioned:
Example #1
Example of jQuery enabled selector to highlight the enabled form elements.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery :enabled selector </title>
</head>
<body>
<h3> This an example of jQuery :enabled selector : </h3>
<form action = "#myform">
<h3> Please Enter the details : </h3>
<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 number : <input type = "text" disabled = "disabled" > <br/> <br/>
Email ID: <input type = "text" > <br/> <br/>
<input type = "submit" id = "subm" disabled = "disabled">
<button> Click to get the enabled elements in the form. </button>
</div>
</form>
<script>
$(document).ready(function() {
$( "button").click(function(){
$( ":enabled" ).css({"background-color" : "red", "border" : "1px dashed black"});
});
});
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a form that contains some input elements and submit button, among these few input elements and submit button are disabled. Next the enabled selector is used, that highlight the enabled elements in the form as “$( “:enabled” ).css({“background-color” : “red”, “border” : “1px dashed black”});”, which are highlighted by using the CSS() function, we can see once we click on the button.
Example #2
Example of jQuery enabled selector to highlight the specific enabled form elements by specifying prefix to the “:enabled” selector.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery :enabled selector </title>
<script>
function disp()
{
$( "select:enabled" ).css({"background-color" : "red", "border" : "1px dashed black"});
}
</script>
</head>
<body>
<h3> This an example of jQuery :enabled selector : </h3>
<form action = "#myform">
<div>
Select from list of vegetables : <select>
<option> Corn </option>
<option> Mushroom </option>
<option> Broccoli </option disabled = "disabled" >
<option> Cucumber </option>
</select>
<p> Some more vegetables will be add soon. </p>
Select from list of fruits : <select>
<option> Apple </option disabled = "disabled" >
<option> Banana </option>
<option> Cherry </option disabled = "disabled" >
<option> Pome </option>
</select>
<p> Some more fruits will be add soon. </p>
<input type = "submit" id = "sub" disabled = "disabled">
</div>
<button onclick = "disp()"> Click to get the enabled elements in the form. </button>
</body>
</html>Output:
Once we click on button, the output is:
In the above code, there is a form that contains two select elements and submit button, among these few options elements and submit button are disabled. Next the enabled selector is used, that highlight the only select enabled elements in the form as “$(“select:enabled”).css({“background-color” : “red”, “border” : “1px dashed black”});”, which selects both the select element and are highlighted by using the CSS() function, we can see once we click on the button.
Example #3
Example of jQuery enabled selector to highlight the all enabled form elements by “*” prefix to the “:enabled” selector.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery :enabled selector </title>
<script>
function disp()
{
$("*").prop("disabled", false);
$( "*:enabled" ).css({"background-color" : "red", "border" : "1px dashed black"});
}
</script>
</head>
<body>
<h3> This an example of jQuery :enabled selector : </h3>
<form action = "#myform">
<div>
Name : <input type = "text" disabled = "disabled"> <br/>
Password : <input type = "text" disabled = "disabled"> <br/>
Select Depaertment : <select>
<option> Production </option>
<option> Marketing </option>
<option> Research and Development </option disabled = "disabled" >
<option> Human Resource Management </option>
</select>
<input type = "submit" id = "sub" disabled = "disabled">
</div>
<button onclick = "disp()"> Click to get the enabled elements in the form. </button>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a form that contains some input elements, and submit button, among these only one input, is disabled. Next the prop() function is used to enable all the form elements and then used the enabled selector, which highlight all the enabled elements in the form as “$( “*:enabled” ).css({“background-color” : “red”, “border” : “1px dashed black”});”, which selects all enabled elements and are highlighted by using the CSS() function, we can see once we click on the button.
Conclusion
It is a built in selector in jQuery, which is used to select all the enabled form elements.
Recommended Articles
This is a guide to jQuery enabled. Here we discuss the introduction, working of jQuery enabled selector and examples respectively. You may also have a look at the following articles to learn more –
