jQuery :disabled Selector

Quiz

The :disabled" selector in jQuery is used to select elements that are currently disabled. It is used to select form elements such as input, button, select, textarea, and fieldset that have the "disabled" attribute set.

Syntax

Following is the syntax of :disabled selector in jQuery −

$(":disabled")

Parameters

Following are the parameters of this method −

":disabled" − This selector selects all disabled form elements in the DOM.

Example 1

In the following example, we are using the ":disabled" selector to select a disabled button −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $(":disabled").css("background-color", "yellow");
  });
</script>
</head>
<body>
<button disabled>Click Me (Disabled)</button>
</body>
</html>

When we execute the above program, the disabled button will be selected and highlighted with yellow background color.

Example 2

In this example, we are selecting all the disabled form elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $(":disabled").css("border", "2px solid red");
  });
</script>
</head>
<body>
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" disabled><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" disabled><br><br>
  <button type="submit">Submit</button>
</form>
</body>
</html>

After executing the program, the disabled form elements will be highlighted with red colored solid border.

jquery_ref_selectors.htm

Print Page