How to Disable a HTML Anchor Tag

In this post, we'll learn how to disable a HTML anchor tag using CSS or inline JavaScript.

Disable HTML Anchor Tag with CSS

The best way to disable a link tag is by using the CSS property pointer-events: none;. When you apply pointer-events: none; to any element, all click events will be disabled.

Because it applies to any element, you can use it to disable an anchor tag.

Here's how to use pointer-events: none; inline to disable a link tag:

HTML
<a href="https://sabe.io" style="pointer-events: none;">Sabe.io</a>

Alternatively, you can use CSS classes and separate the CSS:

HTML
<style>
    .disable-link {
        pointer-events: none;
    }
</style>

<a href="https://sabe.io" class="disable-link">Sabe.io</a>

By using a CSS class, you can disable multiple anchor tags at once.

If you really wanted to, you could even disable all anchor tags on a page by targeting the a tag:

HTML
<style>
    a {
        pointer-events: none;
    }
</style>

<a href="https://sabe.io">Sabe.io</a>

Disable HTML Anchor Tag with JavaScript

If you don't want to use CSS, you can also disable a link tag by using inline JavaScript.

Here's an example of a link that is disabled using JavaScript:

HTML
<a href="javascript:void(0)">Sabe.io</a>

If you try clicking on this link, it won't work, thereby disabling the link.

Conclusion

We've seen how to disable a link tag using CSS or JavaScript. We've also seen how to disable multiple anchor tags at once.

Hopefully, you've found this post helpful!

• Support Us