Disable Click Event Using JQuery

Disable Click Event Using JQuery

Javascript, jQuery, TUTORIALS, WEB

Disable Click Event Using JQuery




In this tutorial Disable Click Event Using JQuery we are gonna show how to disable the onClick function in a web page using the some jQuery predefined functions. We’re gonna use very simple jQuery predefined function to do this like OFF or ON the function.
In jQuery there are tons and tons of predefined functions for perform different kind of tasks. In today’s trending web world the jQuery plays a major role in every part like the User Interface, Data Transfer and etc.
Here we can see how some of them are used for us to do our given task which is disable the click function in the entire page.
For this lesson we are using the bootstrap framework for the better UI and reduce the coding works. And also we can use the same jquery which is comes with the bootstrap.
For this lesson Disable Click Event Using JQuery we are gonna use two buttons and the css which comes with the bootstrap. Here we utilize the buttons and its classes. Consider the following as the HTML file.
Step 1:   Create a new html file.

The above code consists one stylesheet file and the jQuery script file. The output is looks like this,
Disable Click Event Using JQuery
We can also use the CDN jQuery instead of the default jQuery. This may contains the updated functionalities. You can find this at here CDN Jquery. Just add this link to your Site and it will take action as like as the above mentioned jQuery File.
And now for Disable Click Event Using JQuery we can add the script before close the body tag or before close the head tag. We can place them as like we need but the operation is little bit differed.
Step 2:   Add the jQuery Snippet with our file
Here is the script,

In the above script file we can find there is ON   and OFF   functions. As we already learn in the javascript series of lessons which comes first, served as first. So here if you click the disabled button at first then it immediately disable all the click events on the current page.
Or else if you click the Enable button as first then you’ll see an output like this, with the alert Box on the screen.
Disable Click Event Using JQuery
If we click the enable button after clicking the disable button then it doesn’t show any alerts on the screen.
Explanation   How this is works!!!
Inside the script tag we call the two elements by its id, and if the disable element is clicked then it off the click function (Which is gives inside the off parameters). And this, off the functionalities of the click event on the selected element which is the enable.
Or else if we click the enable button then it on the click event and pops up the alert box. That’s it, and so simple.




We hope this lesson will gives you an general idea about how to on and off some functionalities using jQuery. We will learn a lot more about jQuery in the future upcoming lessons.

Leave a Reply