it-swarm.com.de

So deaktivieren Sie HTML-Links

Ich habe einen Link-Button in einem <td>, den ich deaktivieren muss. Dies funktioniert auf IE, aber nicht in Firefox und Chrome. Die Struktur ist - Link in einem <td>. Ich kann keinen Container im <td> hinzufügen (wie div/span)

Ich habe alles versucht, aber nicht mit Firefox (mit 1.4.2 js) funktioniert:

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

Hinweis - Ich kann die Klick-Funktion für das Ankertag nicht abmelden, da sie dynamisch registriert wird. Und ich muss den Link im behinderten Modus zeigen.

232
Ankit

Sie können einen Link nicht deaktivieren (auf tragbare Weise). Sie können eine dieser Techniken verwenden (jede mit ihren eigenen Vor- und Nachteilen).

CSS Weg

Dies sollte der richtige Weg sein (aber später sehen), wenn die meisten Browser dies unterstützen:

a.disabled {
    pointer-events: none;
}

Dies ist zum Beispiel das, was Bootstrap 3.x macht. Derzeit (2016) wird es nur von Chrome, FireFox und Opera (19+) unterstützt. Internet Explorer unterstützte dies bereits ab Version 11, aber nicht für Links es ist jedoch in einem äußeren Element verfügbar:

span.disable-links {
    pointer-events: none;
}

Mit:

<span class="disable-links"><a href="#">...</a></span>

Workaround

Wir müssen wahrscheinlich eine CSS-Klasse für pointer-events: none definieren, aber was wäre, wenn wir Wiederverwendung das disabled-Attribut anstelle einer CSS-Klasse? Streng genommen wird disabled für <a> nicht unterstützt, aber Browser beschweren sich nicht über unbekannte Attribute. Bei Verwendung des Attributs disabled IE wird zwar pointer-events ignoriert, jedoch das IE spezifische disabled-Attribut berücksichtigt. Andere CSS-kompatible Browser ignorieren das Attribut unbekanntdisabled und berücksichtigen den Code pointer-events. Einfacher zu schreiben als zu erklären:

a[disabled] {
    pointer-events: none;
}

Eine weitere Option für IE 11 besteht darin, display von Linkelementen auf block oder inline-block zu setzen:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

Beachten Sie, dass dies eine portable -Lösung sein kann, wenn Sie IE unterstützen müssen (und Sie können Ihren HTML-Code ändern), aber ...

Bitte beachten Sie, dass pointer-events nur ... Zeigerereignisse deaktiviert. Links können weiterhin über die Tastatur navigiert werden. Dann müssen Sie auch eine der anderen hier beschriebenen Techniken anwenden.

Fokus

In Verbindung mit der oben beschriebenen CSS-Technik können Sie tabindex auf eine nicht standardmäßige Weise verwenden, um zu verhindern, dass ein Element fokussiert wird:

<a href="#" disabled tabindex="-1">...</a>

Ich habe die Kompatibilität mit vielen Browsern noch nie überprüft, bevor Sie diese Funktion verwenden. Es hat den Vorteil, ohne JavaScript zu arbeiten. Leider (aber offensichtlich) kann tabindex nicht aus CSS geändert werden.

Klicks abfangen

Verwenden Sie eine href für eine JavaScript-Funktion, überprüfen Sie die Bedingung (oder das deaktivierte Attribut selbst) und führen Sie in diesem Fall nichts aus.

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

So deaktivieren Sie Links:

$("td > a").attr("disabled", "disabled");

Um sie wieder zu aktivieren:

$("td > a").removeAttr("disabled");

Wenn Sie anstelle von .is("[disabled]") möchten, können Sie .attr("disabled") != undefined verwenden (jQuery 1.6+ gibt immer undefined zurück, wenn das Attribut nicht gesetzt ist). is() ist jedoch viel klarer (dank Dave Stewart für diesen Tipp). Bitte beachten Sie, dass ich hier das disabled-Attribut auf eine nicht standardmäßige Weise verwende. Wenn Sie sich darum kümmern, ersetzen Sie das Attribut durch eine Klasse und ersetzen Sie .is("[disabled]") durch .hasClass("disabled") (Hinzufügen und Entfernen mit addClass() und removeClass()).

Zoltán Tamási merkte in einem Kommentar an dass "In einigen Fällen ist das Klickereignis bereits an eine" echte "Funktion gebunden (z. B. mithilfe von Knockoutjs) Deaktivierte Verknüpfungen wurden implementiert, indem ein falscher Falz-Handler an die Ereignisse touchstart, mousedown und keydown des Links gebunden wurde. Dies hat einige Nachteile (es wird verhindert, dass das Blättern durch Berührung auf dem Link gestartet wird) ".

Wenn href nicht deaktiviert ist, kann der Benutzer diese Seite manuell aufrufen.

Löschen Sie den Link

Löschen Sie das href-Attribut. Mit diesem Code fügen Sie keinen Ereignishandler hinzu, sondern ändern den Link selbst. Verwenden Sie diesen Code, um Links zu deaktivieren:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

Und diese, um sie wieder zu aktivieren:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

Ich persönlich mag diese Lösung nicht sehr (wenn Sie nicht mehr mit deaktivierten Links zu tun haben), aber may ist aufgrund der verschiedenen Möglichkeiten, einem Link zu folgen, kompatibler.

Fake-Click-Handler

Fügen Sie eine onclick-Funktion hinzu bzw. entfernen Sie sie, bei der Sie return false nicht mehr folgen. So deaktivieren Sie Links:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Um sie wieder zu aktivieren:

$("td > a").removeAttr("disabled").off("click");

Ich glaube nicht, dass es einen Grund gibt, diese Lösung der ersten vorzuziehen.

Styling

Das Styling ist noch einfacher: Unabhängig von der Lösung, die Sie zum Deaktivieren des Links verwenden, haben wir ein disabled-Attribut hinzugefügt, sodass Sie die folgende CSS-Regel verwenden können:

a[disabled] {
    color: gray;
}

Wenn Sie eine Klasse statt eines Attributs verwenden:

a.disabled {
    color: gray;
}

Wenn Sie ein UI-Framework verwenden, sehen Sie möglicherweise, dass deaktiviert-Links nicht ordnungsgemäß formatiert sind. Bootstrap 3.x behandelt beispielsweise dieses Szenario, und die Schaltfläche ist sowohl mit dem Attribut disabled als auch mit der Klasse .disabled korrekt formatiert. Wenn Sie stattdessen den Link löschen (oder eine der anderen JavaScript-Techniken verwenden), müssen Sie auch das Styling behandeln, da ein <a> ohne href noch als aktiviert markiert ist. 

Zugängliche Rich-Internet-Anwendungen (ARIA)

Vergessen Sie nicht, ein Attribut aria-disabled="true" zusammen mit disabled Attribut/Klasse hinzuzufügen.

465
Adriano Repetti

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

21
Ankit

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
11
kross

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.

5
Kees C. Bakker

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

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.

0
mkk

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;
0
rgfpy

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

0
Pranav

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.

0