jQuery :disabled selector

The :disabled selector is used to select all disabled form elements. It is a pseudo-class selector that can also be used to style the disabled UI elements. This selector can only be used for the HTML elements that support the disabled attribute that are <input>, <textarea>, <button>, <option>, <fieldset>, <optgroup>, <select>, and <menuitem>.

Syntax

The above syntax is similar to the $(''*:disabled'') that selects all disabled form elements.

If we have to select particular disabled elements, we can filter the elements by prefixing the selector with element type or the component name. Suppose we have to only select the disabled button elements, then it can be written as follows.

Let's see some of the illustrations of using the :disabled selector.

Example1

In this example, we are styling all disabled form elements using the :disabled selector. Here, there is a form including some disabled text fields and buttons. The selector will find all disabled elements and apply style to them.

<!DOCTYPE html>
<html>

<head>
<title> jQuery :disabled selector </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$('#inp').click(function(){
$(":disabled").css({"background-color": "yellow", "border": "2px dashed blue"});
});
});
</script>

</head>

<body>
<form action = "#">
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of using jQuery :disabled selector </h2>

<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 no.:  ���<input type = "text"> <br/>  <br/>
Telephone:  ��� <input type = "text" disabled = "disabled"> <br/> <br/>
<input type = "submit" id = "inp">
<button disabled = "disabled"> Reset </button>
</div>

</form>

</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are styling the particular type of disabled elements using the :disabled selector. Here, there is a form including some disabled elements such as textfields, textarea, and buttons. Although multiple elements are disabled, the program will only style the disabled textarea.

The form includes two buttons, one is disabled, and the other is enabled. We have to click the enabled button to style the disabled textarea element. There is a single textarea element, so it will select the single element. But if there are multiple textarea elements, then all textarea elements will get styled.

<!DOCTYPE html>
<html>

<head>
<title> jQuery :disabled selector </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
$('#inp').click(function(){
$("textarea:disabled").css({"background-color": "yellow", "border": "2px dashed blue"});
});
});
</script>

</head>

<body>
<form action = "#">
<h1> Welcome to the javaTpoint.com </h1>
<h2> This is an example of using jQuery :disabled selector </h2>

<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 no.:  ���<input type = "text"> <br/>  <br/>
About Yourself: <textarea disabled = "disabled"> </textarea> <br/>  <br/>
Qualification: <select disabled = "disabled">
<option> Xth </option>
<option> XIIth </option>
<option> UG </option>
<option> PG </option>
</select> <br/>  <br/>
<input type = "submit" id = "inp">

<button disabled = "disabled"> Reset </button>
</div>

</form>

</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -