jQuery : Disable Button, Div, Anchor tag

satinder singh / Updated : / 0 Comments

jQuery disable button: This article explains how to make any button tag, anchor tag or div tag disable or non-clickable. There are many cases when based on some condition and after performing  some action, we need to make HTML button or input tag as disable or to remove it from the web page. And if you were looking for a way to make any button non-clickable, i.e., disable button with jquery then you are landed on right page.

For example while calling jquery ajax function on button click until its response comes we need to make that button disable (non-clickable). It good practise to make that button disable so the user will not hit that button again and again continuously.

In this post will explain how to disable any button whether it’s Button tag, anchor tag or div, li element

HTML Markup: Add a button, div, a tag

Here we are adding a button tag, a div tag and an anchor tag. After is clicked once we want to make it non-clickable (disable).

 <div id="btnDiv">DIV CLICK</div>
 <input id="btnButton" type="button" value="Button Click me" />
 <a href="https://codepedia.info" id="btnAnchr">Anchor Tag Click me</a>

Jquery: code to disable HTML element (div,button,anchor tags)

$("#btnButton").on('click', function () {
    // JQUERY
    $(this).attr("disabled", "disabled");
   // JavaScript
    document.getElementById("btnButton").setAttribute("disabled", "disabled");
    console.log("btn clicked" + count++);

$("#btnDiv").on('click', function () {
    document.getElementById("btnDiv").setAttribute("disabled", "disabled");
    console.log("btn Div" + count++);

$("#btnAnchr").on('click', function (e) {
    $(this).attr("disabled", "disabled");



Conclusion: This is how using jquery .on() method and .off()  method we able to disable (non-clickable) button, div tag in jquery, Hope you enjoy this tutorial.

Post Comment

Your email address will not be published. Required fields are marked *