How to Disable Click Event in jQuery (Enable/Disable Button Click)

Hi! Let's see how to disable click event in jquery here. As a web developer you might have faced the problem of users submitting forms more than once especially ajax forms. Due to slow internet connection or hundred other reasons there is a lot of chance for users to click submit buttons again and again in a web form. To overcome this you can simply restrict users to click button more than once with the help of jquery. You can do this in two ways. One, you can disable the button which makes it to grey out and not respond to clicks. Or you can simply unbind click event from button. With this the button won't be disabled but just the click event alone. Here I'm going to show you how to disable click event for button.

Read Also:

How to Disable Click Event in jQuery?

Just like disabling click event you can enable it at any time with jquery. For that we need jquery's on() and off() methods and they are used to attach and remove event handlers from an element. The methods not only work for buttons but for other html elements too.

On() is used to attach event handlers to html elements
Off() is used to remove event handlers from html elements

First let's add a checkbox and button to html page. When the checkbox is ticked, button click event should be disabled and enabled when unchecked.

<input type="checkbox" id="chkbox" />Disable Click
<button id="submit">Click Me</button>

jQuery Script:

Let's write separate handler function for button click event so that you can use it in as many places as you want.

function clickButton() {
    alert('Button clicked!');
}

Next the event handler for button clicks.

$('#submit').on('click', clickButton);

Then disable the click event when checkbox is ticked.

$('document').ready(function() {
    $('#chkbox').on('change', function(){
        if($(this).prop('checked'))
            $('#submit').off('click');
        else
            $('#submit').on('click', clickButton);
    });
});

That will take care of enabling/disabling click event for button.

Complete Script:

<!DOCTYPE html>
<html>
    <head>
        <title>Enable and Disable Click Event in jQuery</title>
    </head>
    <body>
        <input type="checkbox" id="chkbox" />Disable Click
        <button id="submit">Click Me</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script type="text/javascript">
        $('document').ready(function() {
            $('#chkbox').on('change', function(){
                if($(this).prop('checked'))
                    $('#submit').off('click');
                else
                    $('#submit').on('click', clickButton);
            });
            
            $('#submit').on('click', clickButton);
            
            function clickButton() {
                alert('Button clicked!');
            }
        });
        </script>
    </body>
</html>

Read Also:

That explains about how to enable and disable click event in jquery. I hope you find this jquery snippet useful. Meet you in another interesting tutorial.

How to Disable Click Event in jQuery (Enable/Disable Button Click)

No comments:

Post a Comment

Contact Form