jQuery : Disable Button, Div, Anchor tag

/ / 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 () {
    $(this).off('click');
    document.getElementById("btnDiv").setAttribute("disabled", "disabled");
    console.log("btn Div" + count++);
});

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

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.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

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

0 Comments