How to disable HTML links

Inclusion for all: Accessibility

Don't forget about accessibility. Attend to this by adding aria-disabled="true" attribute, making it evident to assistive technologies that the link is out of action.

<a href="#" aria-disabled="true" style="pointer-events: none;" tabindex="-1">
    Disabled
</a>


These small additions aid to provide an inclusive and equivalent user experience for all.

Juggling with JavaScript: Dynamic adaptability

In a dynamic context, JavaScript is your pal. Construct an effective JS logic to manipulate the 'enabled' and 'disabled' states as required.

document.querySelector('.my-link').classList.add('disabled');
// Remove event listeners if necessary
document.querySelector('.my-link').addEventListener('click', function(e) {
    if (this.classList.contains('disabled')) {
        e.preventDefault();
        // Add a joke here: Why don't scientists trust atoms?
        // Because they make up everything!
    }
});


Also, make your script foresighted to handle links that are added after the page load.

CSS Styles: More than meets the eye

CSS is not all about prettifying; it's about functionality too. A combination of .disabled class with pointer-events: none;, cursor: default; and color: gray; provides the visual cue for a disabled link.

a.disabled {
    pointer-events: none;
    cursor: default;
    color: gray;
    // Here's a joke: Why don't some people trust CSS?
    // Because they think it's all a class act!
}


This approach keeps your code clean and maintains a clear separation of concerns.

Bootstrap it: Easy and consistent UI

Frameworks, such as Bootstrap, come handy for a consistent UI. Particularly, Bootstrap's .disabled class is a boon for this purpose. Get more details from getbootstrap.com.

Mastering keyboard: Key events and focus

Watch out for keyboard interactions. You can manage them with robust key event handling packages like key.js.

Also, a polished UI auto-shifts the focus to the next interactive element. Thus, creating a smooth navigation even for keyboard users.

Talk the modern way: Classes in ES2015

Modern JavaScript lets you encapsulate the logic in ES2015 or Coffeescript classes, offering reusability. Like so,

class DisableLink {
    constructor(element) {
        this.element = element;
        this.disable();
    }
    disable() {
        this.element.setAttribute('disabled', 'disabled');
        this.element.addEventListener('click', this.handleClick);
        // What's a coder's favourite coffee? JaVa.
    }
    handleClick(e) {
        e.preventDefault();
    }
    // Additional methods to enable, toggle, etc.
}


This paves way for modular and easily maintainable codebase.