jQuery Disabled and Enabled Selector

jQuery Disabled and Enabled Selector with Examples

In this article, I am going to discuss jQuery Disabled and Enabled Selector with Examples. Please read our previous article, where we discussed jQuery Selected Selector. At the end of this article, you will understand everything about jQuery Disabled and Enabled Selector.

jQuery Disabled Selector with Examples

jQuery disabled selector targets any element which is disabled. Disabled selector only works with that elements which support the disabled attribute such as <input>, <button>, <optgroup>, <select>, <fieldset>, <textarea>, etc.

Syntax:
  1. $(‘:disabled’): This will target all elements that are disabled
  2. $(‘input:disabled’): This will target all input elements that are disabled
  3. $(‘:input:disabled’): This will target all input fields including <select>, <button>, <textarea> etc that are disabled [Same as $( ‘:disabled’)]

Note: In our jQuery $(‘input’) vs $(‘:input’) Selectors article we have learnt the difference between input selector and :input selector. Let us understand jQuery disabled selector with some examples.

Example1: $(‘:disabled’)

In the below example, we are printing the jQuery object returned by $(‘:disabled’). Notice that all the input fields which have the disabled attribute are present in the object.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Disabled Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Name: </legend>
                <input type="text" name="Name" placeholder="Enetr Your Name" disabled />
            </fieldset>
            <fieldset>
                <legend>Email: </legend>
                <input type="email" name="Email" placeholder="Enetr Your Email" disabled />
            </fieldset>
            <fieldset>
                <legend>Skillset: </legend>
                <label for="HTML">HTML5</label>
                <input type="checkbox" name="skillset" value="HTML" />
                <label for="CSS">CSS3</label>
                <input type="checkbox" name="skillset" value="CSS" />
                <label for="JavaScript">JavaScript</label>
                <input type="checkbox" name="skillset" value="JavaScript" />
                <label for="jquery">jQuery</label>
                <input type="checkbox" name="skillset" value="jQuery" />
            </fieldset>
            <fieldset>
                <legend>Enter your DOB</legend>
                <input type="datetime-local" name="datetime" />
            </fieldset>
            <fieldset>
                <legend>Upload your Photo: </legend>
                <input type="file" name="file" value="file" />
            </fieldset>
            <fieldset>
                <legend>Years of experience: </legend>
                <input type="number" name="number" />
            </fieldset>
            <fieldset>
                <legend>Password: </legend>
                <input type="password" name="password" />
            </fieldset>
            <fieldset>
                <legend>Select Your Gender</legend>
                <label>Male:
                    <input type="radio" name="radiogroup" value="Male" /></label>
                <label>Female:
                    <input type="radio" name="radiogroup" value="Female" /></label>
            </fieldset>
            <fieldset>
                <legend>Select the position you want to apply</legend>
                <select name="position" class="position" multiple disabled>
                    <option value="webdev">Web Developer</option>
                    <option value="webdesg">Web Designer</option>
                    <option value="graphic">Graphic Designer</option>
                    <option value="business">Business Analyst</option>
                    <option value="telecall">Telecaller Executive</option>
                </select>
            </fieldset>
            <fieldset>
                <legend>Any other comments</legend>
                <textarea name="textarea" rows="3" cols="20" disabled></textarea>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" value="submit">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.demo').click(function () {
                let disabledElem = $(':disabled');
                console.log(disabledElem)
            })
        });
    </script>
</body>
</html>

Now, run the above code, and you will get the following web page in the browser.

jQuery Disabled and Enabled Selector with Examples

Now open browser developer tools by pressing the F12 key and have a look at the console tab. Now, click on the Submit button and notice that all the input fields which have the disabled attribute are present in the object are returned.

jQuery Disabled Selector with Examples

Example2: $(‘disabled’)

In the below example, we are applying a red border to the elements which are disabled when we click on the submit button.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Disabled Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Name: </legend>
                <input type="text" name="Name" placeholder="Enetr Your Name" disabled />
            </fieldset>
            <fieldset>
                <legend>Email: </legend>
                <input type="email" name="Email" placeholder="Enetr Your Email" disabled />
            </fieldset>
            <fieldset>
                <legend>Skillset: </legend>
                <label for="HTML">HTML5</label>
                <input type="checkbox" name="skillset" value="HTML" />
                <label for="CSS">CSS3</label>
                <input type="checkbox" name="skillset" value="CSS" />
                <label for="JavaScript">JavaScript</label>
                <input type="checkbox" name="skillset" value="JavaScript" />
                <label for="jquery">jQuery</label>
                <input type="checkbox" name="skillset" value="jQuery" />
            </fieldset>
            <fieldset>
                <legend>Enter your DOB</legend>
                <input type="datetime-local" name="datetime" disabled />
            </fieldset>
            <fieldset>
                <legend>Upload your Photo: </legend>
                <input type="file" name="file" value="file" />
            </fieldset>
            <fieldset>
                <legend>Years of experience: </legend>
                <input type="number" name="number" disabled />
            </fieldset>
            <fieldset>
                <legend>Password: </legend>
                <input type="password" name="password" />
            </fieldset>
            <fieldset>
                <legend>Select Your Gender</legend>
                <label>Male:
                    <input type="radio" name="radiogroup" value="Male" /></label>
                <label>Female:
                    <input type="radio" name="radiogroup" value="Female" /></label>

            </fieldset>
            <fieldset>
                <legend>Select the position you want to apply</legend>
                <select name="position" class="position" multiple disabled>
                    <option value="webdev">Web Developer</option>
                    <option value="webdesg">Web Designer</option>
                    <option value="graphic">Graphic Designer</option>
                    <option value="business">Business Analyst</option>
                    <option value="telecall">Telecaller Executive</option>
                </select>
            </fieldset>
            <fieldset>
                <legend>Any other comments</legend>
                <textarea name="textarea" rows="3" cols="20" disabled></textarea>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" value="submit">Submit</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.demo').click(function () {
                let disabledElem = $(':disabled');
                disabledElem.css('border','2px solid red')
            })
        });
    </script>
</body>
</html>

Now, run the above HTML code and then click on the Submit button and you should see the following output in the browser. Here, it applied a red border to the element which has disabled property.

jQuery Disabled Selector

Example3: $(‘input:disabled’)

What will happen if we use $(‘input:disabled’)? Then only those elements will be targeted which have the <input> tags and which are disabled. Let us modify the script section of the previous as follows. The point that you need to remember is that <textrea>, <select> is also disabled but the border has been removed from them.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.demo').click(function () {
            let disabledElem = $('input:disabled');
            disabledElem.css('border','2px solid red')
        })
    });
</script>

Now, save the above changes and run the code and then click on the Submit button and you should get the following output in the browser.

How to use jQuery Disabled Selector

Example4: $(‘:input:disabled’)

Now if we use $(‘:input:disabled’) then again all input fields will be selected and the border will be applied. This will behave the same as Example 2. Let proves this. Modify the script section as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.demo').click(function () {
            let disabledElem = $(':input:disabled');
            disabledElem.css('border','2px solid red')
        })
    });
</script>

With the above changes in place, run the code and then click on the Submit button and you should get the following output in the browser.

jQuery Disabled and Enabled Selector

jQuery Enabled Selector with Examples:

jQuery enabled selector targets any element which is enabled. That means this will select elements that don’t have the disabled attribute present.

Syntax:

  1. $(‘:enabled’): This will target all elements that are enabled
  2. $(‘input:enabled’): This will target all input elements that are enabled
  3. $(‘:input:enabled’): This will target all input fields including <select>, <button>, <textarea>, etc that are enabled [Same as $(‘:enabled’)]
Example1:

Let us understand jQuery Enabled selector with some examples.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Enabled Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Name: </legend>
                <input type="text" name="Name" placeholder="Enetr Your Name" disabled />
            </fieldset>
            <fieldset>
                <legend>Email: </legend>
                <input type="email" name="Email" placeholder="Enetr Your Email" disabled />
            </fieldset>
            <fieldset>
                <legend>Enter your DOB</legend>
                <input type="datetime-local" name="datetime" disabled/>
            </fieldset>
            <fieldset>
                <legend>Upload your Photo: </legend>
                <input type="file" name="file" value="file" />
            </fieldset>
            <fieldset>
                <legend>Years of experience: </legend>
                <input type="number" name="number" disabled/>
            </fieldset>
            <fieldset>
                <legend>Password: </legend>
                <input type="password" name="password" />
            </fieldset>
            <fieldset>
                <legend>Select the position you want to apply</legend>
                <select name="position" class="position" multiple>
                    <option value="webdev">Web Developer</option>
                    <option value="webdesg">Web Designer</option>
                    <option value="graphic">Graphic Designer</option>
                    <option value="business">Business Analyst</option>
                    <option value="telecall">Telecaller Executive</option>
                </select>
            </fieldset>
            <fieldset>
                <legend>Any other comments</legend>
                <textarea name="textarea" rows="3" cols="20" disabled></textarea>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" value="submit">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.demo').click(function () {
                let enabledElem = $(':enabled');
                enabledElem.css('border','2px solid red')
            })
        });
    </script>
</body>
</html>

Now run the above code and click on the Submit button and you should get the following output.

Disabled and Enabled Selector in jQuery

Look that those elements are targeted who don’t have the disabled attribute. But there is a problem, <fieldset> also supports the disabled attributes. So by $(‘:enabled’) those <fieldset> elements are also targeted here. In order to exclude <fieldset> from our desired list of elements we have to use :not() selector. So, modify the script section as follows.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.demo').click(function () {
            let enabledElem = $(':enabled:not("fieldset")');
            enabledElem.css('border','2px solid red')
        })
    });
</script>

Now our problem is solved. Run the code and you will get the following output.

jQuery Enabled Selector with Examples

Example2: $(‘input:enabled’)

Now if we use $(‘input:enabled’) then only those <input> tags will be selected which don’t have the disabled attribute. So, modify the script section as follows and see the output. In the below example, <select>, <textarea> are also enabled but they are not targeted at all. Moreover, there is no need of using :not(‘fieldset’ ), because the fieldset is not an input element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.demo').click(function () {
            let enabledElem = $('input:enabled');
            enabledElem.css('border','2px solid red')
        })
    });
</script>

With the above changes in place, run the code and click on the Submit button and you should get the following output.

jQuery Enabled Selector

Example3: $(‘:input:enabled’)

Now if we use $(‘:input:enabled’) then again all input fields will be selected which do not have the disabled attribute and the border will be applied. Below is the example.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Enabled Selector</title>
</head>
<body>
    <section>
        <form action="/">
            <fieldset>
                <legend>Name: </legend>
                <input type="text" name="Name" placeholder="Enetr Your Name" disabled />
            </fieldset>
            <fieldset>
                <legend>Email: </legend>
                <input type="email" name="Email" placeholder="Enetr Your Email" disabled />
            </fieldset>
            <fieldset>
                <legend>Enter your DOB</legend>
                <input type="datetime-local" name="datetime" disabled/>
            </fieldset>
            <fieldset>
                <legend>Upload your Photo: </legend>
                <input type="file" name="file" value="file" />
            </fieldset>
            <fieldset>
                <legend>Years of experience: </legend>
                <input type="number" name="number" disabled/>
            </fieldset>
            <fieldset>
                <legend>Password: </legend>
                <input type="password" name="password" />
            </fieldset>
            <fieldset>
                <legend>Select the position you want to apply</legend>
                <select name="position" class="position" multiple>
                    <option value="webdev">Web Developer</option>
                    <option value="webdesg">Web Designer</option>
                    <option value="graphic">Graphic Designer</option>
                    <option value="business">Business Analyst</option>
                    <option value="telecall">Telecaller Executive</option>
                </select>
            </fieldset>
            <fieldset>
                <legend>Any other comments</legend>
                <textarea name="textarea" rows="3" cols="20" disabled></textarea>
            </fieldset>
        </form>
    </section>
    </br>
    <button class="demo" value="submit">Submit</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.demo').click(function () {
                let enabledElem = $(':input:enabled');
                enabledElem.css('border','2px solid red')
            })
        });
    </script>
</body>
</html>

Now, run the above code and click on the Submit button and you should get the following output.

How to use jQuery Enabled Selector

Where can you find jQuery selectors documentation?

Following is the official website of jQuery from where you can find the jQuery Selector Documentation.
https://api.jquery.com/category/selectors/

In the next article, I am going to discuss jQuery Each Function with Examples. Here, in this article, I try to explain jQuery Disabled and Enabled Selector with Examples and I hope you enjoy this jQuery Disabled and Enabled Selector article.

Leave a Reply

Your email address will not be published.