How do you make an anchor link non-clickable or disabled?

Conditionally disabling and styling links with JavaScript

In real-world scenarios, we often need to disable links dynamically based on certain conditions or events. This is where JavaScript sweeps in to save the day by allowing dynamic modification of link behavior.

Dynamic CSS class toggling

Toggling a disabled class depends on some condition. Here's a basic illustration:

// Hello there, General Kenobi! You are a bold one, trying to click me.
document.querySelector('#my-link').addEventListener('click', function(event) {
  if (shouldBeDisabled) { 
    this.classList.add('disabled'); // I have the high ground now!
    event.preventDefault();// This is not the link you're looking for...
  }
});


Stripping href dynamically: You shall not pass!

Let's say, you want to make Gandalf proud and deny passage altogether!

// You shall not pass!
if (shouldBeDisabled) { 
  document.querySelector('#my-link').removeAttr('href');
}


User interaction feedback: You're doing great, sweetie!

If a link is disabled due to a user's action, you can provide an immediate feedback:

// If user isn't logged in, give a polite nudge
if (!isUserLoggedIn) { 
  alert('Please log in to access this feature.'); // Please, I miss you!
}


Personalizing feedback to "Awesome" or "Wrong" can definitely score you bonus points in creating a pleasant UX.

Customizing disabled link appearance with CSS

Visual appeal is crucial so let's look at a few ways to style a disabled link:

Different colors & styling

a.disabled {
  color: #999; // Because gray is the new black
  cursor: default; // Watch me whip, watch me no-click 
  text-decoration: none; // Underlines are so passé
}


Tailoring style to user states

User status, for example, "Logged in" or "Not logged in", can be dynamically reflected in link styles:

a.not-logged-in {
  color: #999;
  pointer-events: none; // Do not disturb
}

a.no-permission {
  color: #999;
  text-decoration: line-through; // Access denied!
  pointer-events: none;
}


Responsive design FTW!

Adapt your design for touch screens and desktops. For touch devices, increase visibility of links, and for desktops, ensure clear feedback on mouse hover.

Cross-browser & accessibility awareness

While using pointer-events, remember its lack of cross-browser compatibility (old browsers say hi!). Check Can I use to ensure browser compatibility.

For accessibility, remember, screen readers could still announce disabled links. Adding the aria-disabled="true" attribute can help:

<a href="..." class="disabled" aria-disabled="true">Disabled Link</a>


Ensure feedforward and feedback are communicated to assistive technologies.

Application-specific Considerations

Sometimes, a simple CSS pointer-events trick won't cut it. Conditional Logic provides finer control:

• User roles: admin vs. regular user
• Product availability in a shopping app
• Feature switches: enabling or disabling features dynamically