How to Disable Click Event in jQuery

Jquery , Show an image preview animated counter Disable Click Event

Let’s see How to Disable Click Event in jQuery.This is Jquery Question solution. 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.

Also Read: How to Convert Data from mysql to json

Here is Method for 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>

Leave a Reply