How to enable or disable an anchor using jQuery?

Preventing default action

preventDefault() plays a key role in stopping the anchor's default behavior. For jQuery 1.7 and above, attach a click handler using .on("click", ...). For older versions, use .click() or **.bind("click")**.

// The "cliffhanger" move - preventing default action using jQuery >= 1.7
$('a.myAnchor').on("click", function (e) {
  if ($(this).hasClass('disabled')) {
    e.preventDefault();  // link thinks twice about jumping off the cliff
  }
});

// "Default" is overrated - preventing default action using older jQuery
$('a.myAnchor').bind("click", function (e) {
  if ($(this).hasClass('disabled')) {
    e.preventDefault();  // link decides to stay home and relax
  }
});


Enhancing usability with disabled class

Enhance usability by marking anchor's state with disabled class and styling it appropriately in CSS using pointer-events: none.

/* CSS to style disabled anchors - the "zombie" look */
a.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;  // Because zombies can't handwrite
}


Animated disabling and enabling

For a more dynamic user experience, add animations like fadeTo() and fadeOut() when toggling between enabled and disabled states.

// Fading out link - it's going into hibernation
$("#myAnchor").addClass('disabled').fadeTo('fast', 0.5);

// Fading in link - it's waking up from hibernation
$("#myAnchor").removeClass('disabled').fadeTo('fast', 1);


Browser support and advanced tips

Before you use pointer-events, check browser support for accessibility. Try using the disabled attribute or aria-disabled for enhanced accessibility.

Advanced tips and edge cases

Interactions with other scripts

Ensure your anchor's behaviour isn't affected by other scripts. Make sure the disabling of one doesn't start a domino effect on other functionalities.

Flexible event handling

Implement flexible logic where disabling an anchor could depend on certain conditions:

$('a#conditionalAnchor').on("click", function (e) {

    // If link needs coffee break
  if (shouldBeDisabled()) {
    $(this).addClass('disabled').removeAttr('href');
    e.preventDefault();  // link is off to get coffee
  } 

  else {
    $(this).removeClass('disabled').attr('href', 'http://example.com'); // link had coffee and is back!
  }
});


Consistent disabling across browsers

Use JavaScript to adjust the tabindex attribute; ensure disabled links don't get focus on tab navigation.

// Focus is overrated.
$("#myUnfocusableAnchor").attr('tabindex', '-1');

// Link needs to feel loved, let's give it focus.
$("#myFocusableAnchor").attr('tabindex', '0');
