Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find all the elements that are disabled in jQuery?
Overview
The disabled elements are the elements which are not usable for the end user. These elements are disabled using the "disable" attribute. So using the JQuery library we can find all the total number of disabled elements in a HTML page. Using the Jquery selector we can find all the disabled elements by passing the ":disabled" pseudo selector. The ":disabled" selector will select all the elements in the top−down approach. This approach will scan all the disabled attributes and will list it out in a variable.
Syntax
The Syntax used in this approach is −
$(":disabled").each(function () {
list += $(this).attr("id")+" ";
});
:disabled − The term ":disabled" is a pseudo class which selects all the disabled attribute elements that are located in HTML.
forEach − In this above Syntax each is a function to iterate upon the variable which contains all the elements of disabled attribute.
this − In above Syntax 'this' is a keyword which denotes the current tag element.
attr() − It is a Jquery method which returns the attribute value, which is passed as argument.
Algorithm
Step 1 − Create a file in your text editor as index.html and add the HTML boilerplate to it.
Step 2 − Now add the Jquery CDN(Content Delivery Network) link to the head tag of the file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
Step 3 − Now create a parent container to create a template of the form.
<div id="form"></div>
Step 4 − Now add some input tags to the form container with their respective id name or class name and add the disabled attribute to a few input tags.
<input type="text" id="text" placeholder="write your name"><br> <select id="dropdown" disabled> <option>Frontend</option> <option>Backend</option> <option>DSA</option> </select><br> <input type="date" id="date" disabled><br> <input type="file" id="fileUpload" disabled><br>
Step 5 − Now create a button inside the form to submit.
<button class="submit" itemid="Button">Submit</button>
Step 6 − Now add the script tag to the body of the page.
<script></script>
Step 7 − Now use the Jquery selector tag to trigger the function by the submit button.
$('.submit').click(() => {})
Step 8 − Now create an empty variable to store the disabled attributes.
var list = "";
Step 9 − Now use the ':disabled' pseudo class to change the styling of the disabled elements.
$(':disabled').css({
"border": "2px dashed black",
"background": "#5050505c"
});
Step 10 − Now use the ":disabled" selector to iterate upon and get all the disabled elements as a pop up.
$(":disabled").each(function () {
list += $(this).attr("id")+" ";
});
alert(list)
Step 11 − As the user clicks on the form it will pop up the disabled elements.
Example
In this Example we will create a sample HTML form to find all the elements that are disabled, so for this we will create a JQuery arrow function with a Jquery selector which will trigger the rest of the function for finding the disabled elements. As the ':disabled' selector selects all the elements disabled attributes so we also have to display those elements to the user so for this we have iterated upon the ":disabled" selector and will store it in a variable and will alert the user.
<html>
<head>
<title> find all the disabled elements </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<style>
input {
margin: 0.5rem 0;
}
</style>
</head>
<body>
<div id="form">
<input type="text" id="text" placeholder="write your name"><br>
<select id="dropdown" disabled>
<option>Frontend</option>
<option>Backend</option>
<option>DSA</option>
</select><br>
<input type="date" id="date" disabled><br>
<input type="file" id="fileUpload" disabled><br>
<button class="submit" itemid="Button">Submit</button>
</div>
<script>
$('.submit').click(() => {
$(':disabled').css({
"border": "2px solid black",
"background": "#5050505c"
});
list = "";
$(":disabled").each(function () {
list += $(this).attr("id")+" ";
});
alert(list)
})
</script>
</body>
</html>
The given below image shows the Output window of the above feature which displays the form for the user to fill his details. So in the above form as a user fills his details and then submit it he will get a pop up notification of the list of disabled elements.
Conclusion
The disabled inputs and button can be easily determined by the user as it can be noticed in a faded color with faded text. But some time there can be a possibility for making the elements disable like in a election form we can make some meaning full entries regarding the person's personal details, so instead of making them available to all the users we can just make them disable and only enable for the users who are above 18 years of age so in this case the above feature can be helpful to the developers. In the above program 'this' keyword plays an important role in displaying the disabled elements as it gets the current disabled element that gets stored in the variable.
311 Views
