Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery :enabled Selector

Posted in jQuery Tutorial
Updated on May 19, 2024
By Mari Selvan
👁️ 44 - Views
⏳ 4 mins
💬 1 Comment
jQuery :enabled Selector

Photo Credit to CodeToFun

🙋 Introduction

jQuery empowers developers with robust tools for building interactive and dynamic web pages. Among these tools is the :enabled selector, which enables you to target HTML elements that are currently enabled. Understanding and utilizing this selector effectively can enhance your ability to create responsive and user-friendly web interfaces.

In this guide, we'll explore the usage of the jQuery :enabled selector with clear examples to help you grasp its significance.

🧠 Understanding :enabled Selector

The :enabled selector in jQuery allows you to select HTML elements that are currently enabled, such as input fields, buttons, and other form elements. It comes in handy when you need to perform actions or apply styles to elements based on their enabled state.

💡 Syntax

The syntax for the :enabled selector is straightforward:

syntax.js
Copied
Copy To Clipboard
$(":enabled")

📝 Example

  1. Selecting Enabled Form Elements:

    Suppose you have a form with input fields and buttons, and you want to select all the enabled elements. You can achieve this using the :enabled selector as follows:

    index.html
    Copied
    Copy To Clipboard
    <input type="text" id="username" disabled>
    <input type="password" id="password">
    <button id="submitBtn" disabled>Submit</button>
    example.js
    Copied
    Copy To Clipboard
    $(":enabled").each(function() {
        console.log($(this).attr('id'));
    });

    This will log the IDs of the enabled elements (password) to the console.

  2. Styling Enabled Elements:

    You can dynamically apply CSS styles to enabled elements using jQuery. For example, let's change the background color of enabled buttons:

    index.html
    Copied
    Copy To Clipboard
    <button id="submitBtn">Submit</button>
    <button id="resetBtn" disabled>Reset</button>
    example.js
    Copied
    Copy To Clipboard
    $(":enabled").css("background-color", "lightgreen");

    This will set the background color of the enabled button with the ID submitBtn to light green.

  3. Handling Events on Enabled Elements:

    You can bind events to enabled elements to enhance interactivity. Here's an example where we alert a message when a button is clicked:

    index.html
    Copied
    Copy To Clipboard
    <button id="submitBtn">Submit</button>
    example.js
    Copied
    Copy To Clipboard
    $("#submitBtn").click(function() {
        alert("Button clicked!");
    });
  4. Disabling Elements Programmatically:

    jQuery allows you to disable elements based on certain conditions. For instance:

    example.js
    Copied
    Copy To Clipboard
    $("#disableBtn").click(function() {
        $("#submitBtn").prop("disabled", true);
    });

    This will disable the button with the ID submitBtn when a button with the ID disableBtn is clicked.

🎉 Conclusion

The jQuery :enabled selector is a valuable tool for targeting and interacting with enabled HTML elements. Whether you need to select elements, apply styles, handle events, or manipulate the enabled state programmatically, this selector provides a convenient solution.

By mastering its usage, you can create more responsive and user-friendly web interfaces with ease.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy