Disable a link in Bootstrap

html

responsive-design

best-practices

accessibility

byAlex Kataev·Jan 22, 2025

To swiftly disable a Bootstrap link, simply add the .disabled class and include the aria-disabled="true" attribute. To ensure that no click event propagates, add a preventDefault() method in JavaScript:

<a href="#" class="btn disabled" aria-disabled="true">I'm a disabled link</a>

document.addEventListener('click', function(event){
  if (event.target.matches('.disabled')) {
    event.preventDefault(); // Warning: Click diet in progress
  }
});

But there's more to this than meets the eye. Let's dive deeper!

Comprehensive guide to disabling links

Boosting disabled links with custom styles

Even after applying the disabled class, additional styles may be needed for total user interaction prevention. Using pointer-events: none; can block interaction, and cursor: default; gives the correct “You shall not pass!” cursor icon.

a.disabled {
  pointer-events: none; // No touching please
  cursor: default; // Default state, calm as a still lake
}

Accessibility first!

To make disabled links unfocusable, it's recommended to add tabindex="-1". This improves accessibility by ensuring tab navigation skips these links.

<a href="#" class="btn disabled" tabindex="-1" aria-disabled="true">I'm an untouchable link</a>

Dynamic content? No problem with jQuery

Managing dynamic content needs a dynamic solution. By binding the click event via jQuery delegation, you can prevent the default action on all disabled links - now and in the future.

$(document).on('click', 'a.disabled', function(e){
  e.preventDefault(); // I said NO touching
});

Flexibility with jQuery: enabling and disabling links

The ability to toggle a link's status quickly can be valuable. With jQuery, you can easily add and remove the disabled class, as if it's a simple game of tag.

// To disable
$('a#myLink').addClass('disabled'); // Tag, you're it!

// To enable
$('a#myLink').removeClass('disabled'); // Freedom at last!

Always check compatibility: Bootstrap's versions

It's crucial to check your Bootstrap version. Older versions might follow different classes or methods for disabling links.

Need a visual? Here's how it works:

Visualize a link as a bustling **Highway** (🛣️):

🚗🚚🚐 ------> 🛣️ ------> 🏞️ (Link active: Vehicles can travel to the destination)

If we impose a roadblock:

🚧😢🛣️ (Link disabled: Vehicles see the highway but can't travel)

This is how you translate it to HTML:

<a href="#" class="disabled" tabindex="-1" aria-disabled="true">🚧 Blocked Road 🚧</a>

Just like that, your link is visible but the barriers (class="disabled") prevent any travel (clicking).

Exploring different trails to disable a link

Using inline event handlers

If you're looking for a swift, inline solution, the onclick attribute can be set to return false. This quickly disables the link without needing extra CSS or JavaScript:

<a href="#" onclick="return false;">I'm immovable</a>

Digging deeper: alternate methods

Check out similar questions and discussions within the Bootstrap community. You may discover unconventional methods, like using AJAX to manage link states dynamically.

Event binding without jQuery

Don't have jQuery? No problem. You can still prevent the default action using vanilla JavaScript's event binding.

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault(); // You shall not pass!
});

Dress up disabled links with custom styling

Ensure your disabled links stand out. Restyle them to be visually distinguishable. This could mean altering color, opacity, or text decoration to indicate their "resting" state.

explain-codes / Html / Disable a link in Bootstrap

Linked

How to disable HTML links



Best way to disable button in Twitter's Bootstrap



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



How do I disable a `href` link in JavaScript?



Event on a Disabled Input

