How to Disable a Hyperlink using JavaScript or jQuery

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.

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();         // Comment this line to enable the link tag again.
            }
        });
    }
</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();
}

Also Read: How to restrict or disable Browser Back button Using JavaScript

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 first example above that uses a simple JavaScript method.

Well, that’s it. Thanks for reading.

Previous - Automatically add a Dash or Hyphen after every 3rd character using JavaScript or jQueryNext - How to disable Submit button after click using JavaScript



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!