Updated April 7, 2023
Introduction to jQuery disabled attr
The jQuery disabled attribute selector is used to select all disabled form elements. The jQuery disabled attribute selector is a built-in selector in jQuery, which can also use as a style to disable UI elements. All the form elements by default are enabled, if any of the elements need to be disabled then by using the disabled form we can disable it. The disabled elements are unusable. The HTML elements that support the disabled form are the button, select, option, optgroup, input, textarea, menuitem, fieldset, and all. If the disabled element needs further to be enabled based on the requirement, then JavaScript could remove the disabled attribute to make the element enable and to use it again. In this topic, we are going to learn about jQuery disabled attr.
The syntax of the jQuery disabled attribute selector –
$( ":disabled" )The syntax of the jQuery disabled attribute selector to selects all disabled form elements –
$( "*:disabled" )The syntax of the jQuery disabled attribute selector to selects the specified disabled form elements –
$( "selector : disabled" )Parameters –
selector – This is an optional parameter. It specifies the filter expression or elements by prefixing the selector element type
Return value –
The return value of this selector is HML selected elements which are support disabled attributes.
Working of the jQuery disabled attribute selector
The jQuery disabled attribute selector selects all disabled form elements. Suppose we have a form element in the HTML page that contains some disabled form input elements. Now we need to highlight all the disabled inputs, so we can use the disabled selector as “$(“input:disabled” ) .css({ “background-color” : “red”);”, which highlights all the disabled elements by red background colour.
Examples for the jQuery disabled attribute selector
Here are the following examples mention below
Example #1
Example of jQuery disabled attribute selector to highlight the disabled form elements –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery :disabled attr selector </title>
</head>
<body>
<h3> This an example of jQuery :disabled attr selector : </h3>
<form action = "#myform">
<h3> Please Enter the details : </h3>
<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 number : <input type = "text" disabled = "disabled" > <br/> <br/>
Email ID: <input type = "text" > <br/> <br/>
<input type = "submit" id = "subm" disabled = "disabled">
<button> Click to get the disabled elements in the form. </button>
</div>
</form>
<script>
$(document).ready(function() {
$( "button").click(function(){
$( ":disabled" ).css({"background-color" : "red", "border" : "1px dashed black"});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there is a form that contains some input elements and submit button, among these few input elements and submit button are disabled. Next the disabled selector is used, that highlight the disabled elements in the form as “$( “:disabled” ).css({“background-color” : “red”, “border” : “1px dashed black”});”, which are highlighted by using the CSS() function, we can see once we click on the button.
Example #2
Example of jQuery disabled attribute selector to highlight the specific disabled form elements by specifying prefix to the “:disabled” selector –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery :disabled attr selector </title>
<script>
function disp()
{
$( "select:disabled" ).css({"background-color" : "red", "border" : "1px dashed black"});
}
</script>
</head>
<body>
<h3> This an example of jQuery :disabled attr selector : </h3>
<form action = "#myform">
<div>
Select from list of vegetables : <select disabled = "disabled">
<option> Corn </option>
<option> Mushroom </option>
<option> Broccoli </option >
<option> Cucumber </option>
</select>
<p> Some more vegetables will be add soon. </p>
Select from list of fruits : <select>
<option> Apple </option>
<option> Banana </option>
<option> Cherry </option>
<option> Pome </option>
</select>
<p> Some more fruits will be add soon. </p>
<input type = "submit" id = "sub" disabled = "disabled">
</div>
<button onclick = "disp()"> Click to get the disabled elements in the form. </button>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code, there is a form that contains two select elements and submit button, among these few options elements and submit button are disabled. Next the disabled selector is used, that highlight the only select disabled elements in the form as “$( “select:disabled” ).css({“background-color” : “red”, “border” : “1px dashed black”});”, which selects both the disabled select element and are highlighted by using the CSS() function, we can see once we click on the button.
Example #3
Example of jQuery disabled attribute selector to highlight the all disabled form elements by “*” prefix to the “:disabled” selector –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery :disabled attr selector </title>
<script>
function disp()
{
$("*").prop("disabled", true);
$( "*:disabled" ).css({"background-color" : "red", "border" : "1px dashed black"});
}
</script>
</head>
<body>
<h3> This an example of jQuery :disabled attr selector : </h3>
<form action = "#myform">
<div>
Name : <input type = "text" disabled = "disabled"> <br/>
Password : <input type = "text" disabled = "disabled"> <br/>
Select Depaertment : <select>
<option> Production </option>
<option> Marketing </option>
<option> Research and Development </option disabled = "disabled" >
<option> Human Resource Management </option>
</select>
<input type = "submit" id = "sub" disabled = "disabled">
</div>
<button onclick = "disp()"> Click to get the disabled elements in the form. </button>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code, there is a form that contains some input elements and submits button, among these only one input, is disabled. Next the prop() function is used to disable all the form elements and then used the disabled selector, which highlight all the disabled elements in the form as “$( “*:disabled” ).css({“background-color” : “red”, “border” : “1px dashed black”});”, which selects all disabled elements and are highlighted by using the CSS() function, we can see once we click on the button.
Conclusion
The jQuery disabled attribute selector is a built-in selector in jQuery, which is used to selects all the disabled form elements.
Recommended Articles
This is a guide to jQuery disabled attr. Here we discuss the Working of the jQuery disabled attribute selector along with the examples and outputs. You may also have a look at the following articles to learn more –
