jQuery :disabled selector
The jQuery :disabled selector is used to select and target form elements that are disabled. Disabled elements are those that the user cannot interact with or modify. These elements have the “disabled” attribute set.
Here’s the basic syntax of the :disabled selector:
$(':disabled')This selector will match all disabled form elements, such as input elements, select elements, textarea elements, and buttons.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery :disabled 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() {
// Disable all form elements with the :disabled selector
$(':disabled').css('background-color', 'lightgray');
});
</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 :disabled selector to target all disabled elements and apply a light gray background to them using the css() method. As a result, all disabled form elements will have a light gray background.
The :disabled selector is helpful for styling, manipulating, or filtering form elements that are currently disabled and not available for user interaction.