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.
Sie können einen Link nicht deaktivieren (auf tragbare Weise). Sie können eine dieser Techniken verwenden (jede mit ihren eigenen Vor- und Nachteilen).
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>
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.
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.
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 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.
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.
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.
Vergessen Sie nicht, ein Attribut aria-disabled="true"
zusammen mit disabled
Attribut/Klasse hinzuzufügen.
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:
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;
}
Als Nächstes instanziieren Sie diese Klasse in Bereitschaft (mit optionalem Selektor):
new AnchorDisabler()
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
}
}
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>
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.