How to find all elements that are disabled in jQuery ? - GeeksforGeeks

13 Apr, 2021
In this article, we will learn how to find all elements on the page that are disabled using jQuery.
Approach: The :disabled selector can be used to get all elements on the page that are currently disabled. These elements are iterated over using the each() method. The elements can then be individually accessed using the this reference inside the function of the each() method.
A particular type of element can be selected by specifying the type of element in front of the disabled selector, else all the elements on the page are checked if they are disabled. For example, using “input:disabled” will only select the disabled elements that are of the input type.
 
Syntax:
$(".btn").click(function () {
    
    let disabled_elems = "";
  
    // Get all the disabled elements
    $(":disabled").each(function (index) {
    
        // Add a border to the elements
        $(this).css("border", "10px red dashed");

        // Add the IDs to the list
        disabled_elems += "<li>" 
            + ($(this).attr("id")) + "</li>";
    });

    $(".elems").html(disabled_elems);
});

The below example illustrates the above approach:
Example:
HTML
<!DOCTYPE html><html>  <head>    <script src="https://code.jquery.com/jquery-3.3.1.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>      <b>        How to find all elements that        are disabled in jQuery?    </b>      <!-- Define some elements with         the disabled attribute -->    <p><b>Inputs</b></p>      <input type="text" id="inp1" disabled />    <br><br>    <input type="text" id="inp2" />      <p><b>Buttons</b></p>      <button type="button" id="btn1">        Enabled Button    </button>    <br><br>      <button type="button" id="btn2" disabled>        Disabled Button    </button>      <p><b>Selects</b></p>      <select id="select1" disabled>        <option value="opt1">Option 1</option>    </select>    <br><br>      <select id="select2">        <option value="opt1">Option 1</option>    </select>    <br>      <p>        Click on the button to mark all        the disabled elements and        get their element ID    </p>      <button class="btn">        Get all disabled elements    </button>    <br><br>      <b>The ids of the disabled elements are:</b>    <ul class="elems"></ul>      <script>        $(".btn").click(function () {              let disabled_elems = "";              // Get all the disabled elements            // using the :disabled selector            $(":disabled").each(function (index) {                  // Add a border to the elements                $(this).css(                    "border", "10px red dashed"                );                  // Add the IDs to the list                disabled_elems += "<li>"                     + ($(this).attr("id")) + "</li>";            });              $(".elems").html(disabled_elems);        });    </script></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Tags
jQuery-Methods
jQuery-Questions
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?