How to enable/disable a button using jQuery ?

Last Updated : 30 Jul, 2024

Enabling/disabling a button using jQuery involves altering its functionality to either accept user input or not. This is typically done by manipulating its 'disabled' property or attribute through jQuery methods like `.prop()` or .attr().

To enable/disable a button using jQuery, you'll need a basic HTML structure along with JavaScript/jQuery. Below is a simple code structure to get you started

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Enable/Disable</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">

    </script>
</head>
<body>

    <button id="myButton">Click Me</button>

    <script>
        $(document).ready(function(){
            // jQuery code to enable/disable button
            // Add your code here
        });
    </script>

</body>
</html>

Examples of enabling/disabling a button using jQuery

1. Using the .prop() method:

Using .prop() in jQuery to enable/disable a button involves setting its 'disabled' property to true or false, providing efficient control over its interactivity based on application requirements and user interactions.

Example: In this example we are using jQuery: Toggles button's 'disabled' property on click and double-click events for smooth user interaction using .prop() method.

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">

        </script>
    </head>

    <body>
        <h3>Using the .prop() method</h3>

        <button id="update">update me</button>

        <div style="margin-top: 50px">
            <button id="change">click me</button>
        </div>

        <script>
            $("#change").on("click", function () {
                $("#update").prop(
                    "disabled",
                    true
                );
            });
            $("#change").on(
                "dblclick",
                function () {
                    $("#update").prop(
                        "disabled",
                        false
                    );
                }
            );
        </script>
    </body>
</html>

Output:

JqueryToggle — .prop() method Example Output

2. Using the .attr() method

Using the .attr() method in jQuery, you toggle the 'disabled' attribute of elements. Clicking a button disables another button, while double-clicking re-enables it, enhancing user interaction and functionality within web pages.

Example: In this example we are using .attr() method to enable/disable button. Clicking disables another button; double-clicking re-enables it, enhancing user interaction and web functionality.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
<body>
    <h3>Using the .attr() method</h3>
    <button id="update">Update Me</button>
    <div style="margin-top: 50px;">
        <button id="change">Click Me</button>
    </div>

    <script>
        $("#change").on("click", function () {
            $("#update").attr("disabled", "disabled");
        });

        $("#change").on("dblclick", function () {
            $("#update").removeAttr("disabled");
        });
    </script>
</body>
</html>