Disable a HTML <a> link/anchor tag

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript.

Disable HTML anchor with CSS pointer-events: none

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style.

pointer-events: none will disable all click events on the anchor element.

For example:

<a href="https://google.com" style="pointer-events: none">Google.com</a>

The pointer-events can be set using CSS properties and selectors:

<style>
.disabled-link {
  pointer-events: none;
}
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>

This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.

<style>
/* not recommended */
a {
  pointer-events: none;
}
</style>
<a href="https://google.com">Google.com</a>

We’ve now seen how to disable an HTML anchor/link element (a tag) using pointer-events: none, which can be done without touch the existing href attribute using styles.

Next we’ll see how to disable an HTML anchor/link element using inline JavaScript inside of the href attribute.

Disable HTML anchor with inline JavaScript href="javascript:void(0)"

The following link is disabled using inline JavaScript in the href attribute.

<a href="javascript:void(0)">Google.com</a>

This can be useful when combined with a JavaScript library like Alpine.js:

<div x-data="{ disabled: false }">
  <a :href="disabled ? 'javascript:void(0)': 'https://google.com'">Google.com</a>
  <button @click="disabled = !disabled">toggle disabled</button>
</div>

The examples in this post can be found on CodePen.

Photo by Jonathon Young on Unsplash