jQuery :enabled Selector

Quiz

The :enabled selector in jQuery is used to select all enabled form elements (such as <input>, <select>, <textarea>, and <button>).

Syntax

Following is the syntax of :enabled selector in jQuery −

$(":enabled")

Parameters

Following are the parameters of this method −

":enabled" − This selector selects all header elements in the document.

Example 1

In the following example, we are demonstrating the usage of ":enabled" selector with input elements −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input:enabled").css("background-color", "lightgreen");
        });
    </script>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" value="John Doe"><br><br>
        <label for="email">Email:</label>
        <input type="text" id="email" value="john@example.com" disabled><br><br>
        <label for="phone">Phone:</label>
        <input type="text" id="phone" value="123-456-7890"><br><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

After executing the above porgram, all enabled input fields will be highlighted with a light green background color. The disabled email input will not be highighted.

Example 2

In this example, we are demonstrating the usage of ":enabled" selector with input elements −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button:enabled").css("color", "blue");
        });
    </script>
</head>
<body>
    <form>
        <button type="button" id="btn1">Button 1</button>
        <button type="button" id="btn2" disabled>Button 2</button>
        <button type="button" id="btn3">Button 3</button>
    </form>
</body>
</html>

When we execute the above porgram, all enabled buttons will be highlighted with a blue color. The disabled button will not be highighted.

jquery_ref_selectors.htm

Print Page