How to find all elements that are disabled in jQuery ?

Last Updated : 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> 