Successfully implemented the CSS fix.

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

The above CSS code snippet effectively disables the click event for the anchor tag.

For more information, feel free to visit this website

Big shoutout to all those who shared their solutions (special thanks to @AdrianoRepetti). I took multiple approaches and combined them to create a more advanced disabled functionality that works seamlessly across different browsers. Check out the code below, available in both ES2015 and coffeescript versions based on your preference.

This implementation offers multiple layers of defense to ensure that Anchors marked as disabled actually act that way. With this approach, you get an anchor that:

• Cannot be clicked
• Cannot be tabbed to and activated by hitting return
• Redirects focus to the next focusable element when tabbed to
• Is aware if the anchor is later enabled

How to Use

1. Start by including this CSS rule, which acts as the initial line of defense. This assumes that you are using the selector a.disabled

   a.disabled {
     pointer-events: none;
     cursor: default;
   }
   

2. Next, initialize this class when the document is ready (with an optional selector):

   new AnchorDisabler()
   

ES2015 Class

npm install -S key.js

import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

Coffescript class:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Here's a suggestion to try:

$(td).find('a').attr('disabled', 'disabled');

It seems that disabling a link works well in Chrome, as shown in this example: http://jsfiddle.net/KeesCBakker/LGYpz/.

However, Firefox might not behave the same way. You can use this alternative approach:

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$(document).on('click', 'a', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

Please note that I've included a 'live' statement for handling future disabled or enabled links.
Additionally, I've changed 'live' to 'on' for clarity.

Bootstrap 4.1 introduces a new class called disabled along with the attribute aria-disabled="true".

For example:

<a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

Visit getbootstrap.com for more information.

If you want to make this dynamic and don't need to worry about whether it's a button or an anchor element, you can use the following JavaScript code:

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

However, please note that this solution only applies to links with classes btn btn-link.

For links with the class card-link, this solution may not work as intended as Bootstrap recommends using a different approach.

To disable the anchor tag, simply include this css property:

<style>   
a {
 pointer-events: none;
}
</style>

By adding the above code snippet, you can effectively prevent interactions with the anchor tag.

After some experimentation, I've come up with a versatile solution that can handle both attribute-based and class-based disabled links:

CSS Styles:

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

Javascript (inside jQuery's document-ready function):

$("a[disabled], a.disabled").on("click", function(event){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        event.preventDefault();
})

If you want to deactivate the HTML link, you can do so in the following ways:

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

Another option is to use inline JavaScript:

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

If you don't want a link to be clickable, simply remove the action from it.

$(td).find('a').attr('href', '');

For more information: Elements that can be Disabled

If you're looking to disable certain links on your page, one approach could be:

$('td a.disabled-link').click(function(e) {
  e.preventDefault();
});

This code snippet adds the class "disabled-link" to the links you want to disable, and prevents their default action when clicked. To re-enable them, simply remove the class from the link elements.

To prevent a link from being accessed on a touch device:

if (disableTouchLink == true)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

Using Razor syntax in a .cshtml file, you have the ability to write code like this:

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

One recommendation would be to transform the link into a button and apply the 'disabled' attribute. For guidance on converting a link to a button, you can refer to this resource: How to create an HTML button that acts like a link