Menu Close

Jquery :enabled selector with example

Enabled selector

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

Syntax:

$(":enabled")

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

In the below example, there is a form that including some disabled and enabled elements. The highlighted background elements are enabled html elements by using :enabled selector.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jquery :enabled 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(){
             $(":enabled").css("background-color", "#009933");
        }); 
    </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> 
Posted in HTML, jQuery, Web Technologies

You can also read...