Unlike HTML form input controls, there is no disabled attribute for the <a> tag. Therefore, simply adding the disabled attribute to the link won’t actually disable it. There is a workaround though. You can use the DOM addEventListener() method in JavaScript to prevent it to perform its default behavior and there is also a simple method in jQuery.

Links are useful for navigating a website and why would anyone want to disable it, depends on a situation. I have seen this kind of behavior on bank portals. In such cases, you can simply remove the page link from the <a> tags href attribute. However, if you want to do this dynamically, on special occasions, try these examples.

Disable <a> tag in JavaScriptusing DOM addEventListener() Method

The DOM addEventListener() method attaches an event handler to the document. We can use this method to prevent a link from opening a page.

<html> <head> <title>Disable Link using JavaScript</title> </head> <body> <p>The below link is disabled using JavaScript</p> <a href='https://www.encodedna.com/' id='home' target='blank'>Home</a> </body> <script> var lnk = document.getElementById('home'); if (window. addEventListener ) { document. addEventListener ('click', function (e) { if (e.target.id === lnk.id) { e. preventDefault (); } }); } </script> </html> Try it

The addEventListener() method returns the element (e) when clicked anywhere on the document. When a user click’s our Home Link, the listener checks the id and prevents the <a> tags default behavior that is opening the specified link.

You can use the name attribute too. For example, if the hyperlink has a name attribute like,

<a href="https://www.encodedna.com/" name ="theHomePage" target="blank">Home</a>

then your if condition should be,

if (e.target. name === 'home') { e. preventDefault (); }

If you want to disable multiple <a> tags or hyperlinks on a web page, you can simply use the nodeName property of the element, like this …

if (e.target. nodeName === 'A') { e. preventDefault (); }

👉



Using jQuery to disable <a> tag

With jQuery, you can use the click handler, which will return a false when someone clicks the link. Its like saying, do nothing when this link is clicked.

<html> <head> <title>Disable link tag using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <p>The below link is disabled using jQuery</p> <a href="https://www.encodedna.com/" id="home" target="blank">Home</a> </body> <script> $(document).ready(function () { $('#home'). click (function () { return false; }); }); </script> </html> Try it

In the above example, I am using the id as selector. You can the a as selector when you want to disable all the links on a web page, like this.

$('a'). click (function() { return false; });

As usual, the jQuery methods are less complicated and straightforward. However, if you want to avoid using a library, then I would recommend using the that uses a simple JavaScript method.

Well, that’s it. Thanks for reading. ☺

← PreviousNext →