jQuery :enabled selector
The jQuery :enabled selector is used to select and target form elements that are enabled and available for user interaction. Enabled elements are those that do not have the “disabled” attribute set.
Here’s the basic syntax of the :enabled selector:
$(':enabled')This selector will match all enabled form elements, such as input elements, select elements, textarea elements, and buttons.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :enabled Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="text" name="username" disabled>
<input type="password" name="password">
<select name="gender" disabled>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<button type="submit" disabled>Submit</button>
</form>
<script>
$(document).ready(function() {
// Enable all form elements except those with the :disabled selector
$(':enabled').css('background-color', 'lightblue');
});
</script>
</body>
</html>In this example, we have a form with various form elements, some of which are disabled using the “disabled” attribute. We use the :enabled selector to target all enabled elements and apply a light blue background to them using the css() method. As a result, all enabled form elements (except the disabled ones) will have a light blue background.
The :enabled selector is useful for styling, manipulating, or filtering form elements that are currently enabled and available for user interaction. It allows you to target the interactive elements separately from the disabled ones.