So deaktivieren Sie HTML-Links

Habe den Fix in CSS. 

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

Wenn über css auf das Ankertag angewendet wird, wird das click-Ereignis deaktiviert.

Für Details checkout diesen link

Vielen Dank an alle, die Lösungen gepostet haben (vor allem @AdrianoRepetti). Ich habe mehrere Ansätze kombiniert, um einige erweiterte disabled-Funktionen bereitzustellen (und das funktioniert browserübergreifend). Der Code ist unten (sowohl ES2015 als auch Kaffeescript nach Ihren Wünschen).

Dies sorgt für mehrere Verteidigungsebenen, so dass sich Anchors, die als deaktiviert markiert sind, tatsächlich so verhält. Mit dieser Methode erhalten Sie einen Anker, den Sie nicht erreichen können:

• klicken
• tab zu und drücken Sie die Eingabetaste
• wenn Sie darauf tippen, wird der Fokus auf das nächste fokussierbare Element verschoben
• es ist bekannt, wenn der Anker anschließend aktiviert ist

Wie man

1. Fügen Sie diese CSS hinzu, da dies die erste Verteidigungslinie ist. Dies setzt voraus, dass der von Ihnen verwendete Selector a.disabled ist.

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

2. Als Nächstes instanziieren Sie diese Klasse in Bereitschaft (mit optionalem Selektor):

     new AnchorDisabler()
   

ES2015-Klasse

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-Klasse:

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

Probieren Sie das Element aus:

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

Das Deaktivieren eines Links funktioniert für mich in Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/ .

Firefox scheint Nizza nicht zu spielen. Dieses Beispiel funktioniert:

<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();
    }
});

Hinweis: Eine Live-Anweisung für zukünftige deaktivierte/aktivierte Links wurde hinzugefügt.
Anmerkung2: 'live' in 'on' geändert.

Ich habe die Lösung unten gefunden, die entweder mit einem Attribut <a href="..." disabled="disabled"> oder einer Klasse <a href="..." class="disabled"> arbeiten kann:

CSS-Styles:

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

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

Javascript (in jQuery bereit):

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

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

Ich würde so etwas machen

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

so etwas sollte funktionieren. Sie fügen eine Klasse für Links hinzu, die Sie deaktivieren möchten, und geben dann false zurück, wenn jemand auf sie klickt. Um sie zu aktivieren, entfernen Sie einfach die Klasse.

So deaktivieren Sie den Link, um auf eine andere Seite des Touchgeräts zuzugreifen:

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

sie können einen Link nicht deaktivieren. Wenn Sie möchten, dass das Click-Ereignis nicht ausgelöst wird, Remove einfach die action von diesem Link.

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

Für weitere Informationen: - Elemente, die deaktiviert werden können

Bootstrap 4.1 bietet eine Klasse mit den Namen disabled und aria-disabled="true".

beispiel"

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

Mehr ist auf getbootstrap.com

Also, wenn Sie es dynamisch machen wollen, und you don't want to care if it is button or ancor alsim JS-Skript benötigen Sie so etwas

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

Aber seien Sie vorsichtig

Die Lösung funktioniert nur für Links mit Klassen btn btn-link.

Manchmal empfiehlt Bootstrap die Verwendung der Klasse card-link. In diesem Fall funktioniert die Lösung nicht.