How to find all input elements that are enabled using jQuery?
Last Updated :
13 Apr, 2021
Improve
The jQuery " :enabled" pseudo-class selector helps to find all the input element that are enabled. This pseudo-class selector should only be used for selecting HTML elements that support the disabled attribute i.e (<button>, <input>, <textarea>, <select>, <option>, <optgroup>)
As with other pseudo-class selector like (a:hover) is also recommended preceding it with a tag name or with some other selector, otherwise the universal selector ("*") is implied like $( "*:enabled" ) or $( "input:enabled").
Syntax:
$( "input:enabled" ).val( "This box is enabled" );
Note: (:enabled) select elements that have their boolean disabled property strictly to false.
HTML code: The following code demonstrates the :enabled pseudo-class selector to find all the input elements that are enabled using jQuery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elements that are enabled</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h1 style="color: green; margin-left: 120px;">GeeksforGeeks</h1>
<!-- The form contains three boxes out
of which two boxes are disabled -->
<form>
<!-- Set input disabled -->
<input style="border: 0.8px solid green;" name="email" disabled>
<input style="border: 0.8px solid green;" name="id">
<input style="border: 0.8px solid green;" name="email" disabled>
</form>
<!-- The val is displayed in the box in
which the input element is enabled -->
<script>
$( "input:enabled" ).val( "This box is enabled" );
</script>
</body>
</html>
<html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elements that are enabled</title> <script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body> <h1 style="color: green; margin-left: 120px;">GeeksforGeeks</h1> <!-- The form contains three boxes out of which two boxes are disabled --> <form> <!-- Set input disabled --> <input style="border: 0.8px solid green;" name="email" disabled> <input style="border: 0.8px solid green;" name="id"> <input style="border: 0.8px solid green;" name="email" disabled> </form> <!-- The val is displayed in the box in which the input element is enabled --> <script> $( "input:enabled" ).val( "This box is enabled" ); </script> </body></html>Output:
