Menu Close

Jquery :disabled selector with example

Jennifer
Disabled selector

In this blog, we will learn about jquery :disabled selector. The :disabled selector  is used to select all disabled form elements.

Syntax:

$(":disabled")

The :disabled selector is used for the HTML elements that support the disabled attribute that are <input>, <textarea>, <button>, <option>, <fieldset>, <optgroup>, <select>, and <menuitem>. 

If we need to select particular disabled elements, we can filter that element by its type or that element name. For example, if we need to select only the disabled button element by its name. Follow the below syntax.

Syntax:

$("button:disabled")

In the below example there is a form, including some disabled and enabled elements. Here, we are styling all disabled form elements using the :disabled selector.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jquery :disabled selector</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> 
        $(document).ready(function(){
             $(":disabled").css("background-color", "#ff0000");
        }); 
    </script>
    <style>
        .select-style {
            padding:50px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="select-style">
        <form action="">
            Name: <input type="text" name="user"><br><br>
            E-mail: <input type="text" name="mail-id" disabled="disabled"><br><br>
            <input type="submit">
        </form>
    </div>  
</body>
</html>
Popular Posts
Total Views: 88
Posted in HTML, jQuery, Web Technologies
Tagged , , , , ,

You can also read...