Deaktivieren Sie einen Link in Bootstrap

73

Das erste Beispiel hat nicht funktioniert. Ich muss immer eine Liste haben, um Links zu deaktivieren. Oder was ist los mit meiner ersten Demo?

<a class="disabled" href="#">Disabled link</a>

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

https://jsfiddle.net/7y0u2amy/

html css twitter-bootstrap twitter-bootstrap-3 user2990084
quelle
Wenn Sie sich die Dokumente kurz ansehen, sieht es so aus, als ob deaktiviert nur für Formularelemente verfügbar ist.
jksnw

Antworten:

103

Ich denke du brauchst die BTN Klasse.
Es wäre so:

<a class="btn disabled" href="#">Disabled link</a>
Caampa
quelle
13
Oder besser, verwenden Sie, btn-linkum das Aussehen eines Links beizubehalten.
Jacob van Lingen
1
@JacobvanLingen Aber mit btn-link disabledfunktioniert nicht richtig, weil pointer-events: none;es nicht angewendet wird (Bootstrap 3)
user764754
65

Es scheint, dass Bootstrap keine deaktivierten Links unterstützt. Anstatt zu versuchen, eine Bootstrap-Klasse hinzuzufügen, können Sie auch eine eigene Klasse hinzufügen und ihr etwas Stil hinzufügen, einfach wie folgt:

a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
<a href="#" class="disabled" tabindex="-1">Link to disable</a><br/>
<a href="#">Non-disabled Link</a>
Erweitern Sie das Snippet

Emanuela Colta
quelle
4
Es ist erwähnenswert, dass "Zeigerereignisse" einige Einschränkungen haben. Aus der Bootstrap 3-Dokumentation: "Diese Klasse verwendet Zeigerereignisse: keine, um zu versuchen, die Verknüpfungsfunktionalität von <a> s zu deaktivieren, aber diese CSS-Eigenschaft ist noch nicht standardisiert und wird in Opera 18 und darunter oder in nicht vollständig unterstützt Internet Explorer 11. Darüber hinaus bleibt die Tastaturnavigation auch in Browsern, die Zeigerereignisse unterstützen: keine, unberührt. Dies bedeutet, dass sehende Tastaturbenutzer und Benutzer unterstützender Technologien diese Links weiterhin aktivieren können. Verwenden Sie daher aus Sicherheitsgründen benutzerdefinierte Links JavaScript, um solche Links zu deaktivieren. "
Losmescaleros
2
Durch Deaktivieren von Zeigerereignissen wird kein Tooltip angezeigt, wenn der Benutzer dies benötigt. <a href="#" title="Der Grund ist...." class="disabled" tabindex="-1"> Link zum Deaktivieren </a>
Vimalan Jaya Ganesh
6

Wenn Sie versuchen, einen Link zu deaktivieren, gibt es keine Möglichkeit, dies zu tun. Ich denke, Sie können hier eine Antwort finden, die für Sie in dieser Frage funktioniert.

Eine Option ist hier zu verwenden 

<a href="/" onclick="return false;">123n</a>

Href-Tag deaktiviert

Kassandra
quelle
3
Sie können die Stile eines deaktivierten Links in CSS nachahmen, indem Sie .disabled {cursor: not-allow; Farbe: #eee; }
Cassandra
immer noch anklickbar
mxmissile
6

Ich habe gerade meine eigene Version mit CSS erstellt. Wenn ich das Dokument fertig habe, verwende ich jQuery, um es zu aktivieren. Auf diese Weise kann ein Benutzer erst dann auf eine Schaltfläche klicken, wenn das Dokument fertig ist. Also kann ich stattdessen durch AJAX ersetzen. Die Art und Weise, wie ich darauf gekommen bin, bestand darin, dem Ankertag selbst eine Klasse hinzuzufügen und die Klasse zu entfernen, wenn das Dokument fertig ist. Könnte dies für Ihre Bedürfnisse wiederverwenden.

CSS:

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

HTML:

<a class="btn btn-info disabled">Link Text</a>

JS:

$(function(){
    $('a.disabled').on('click',function(event){
        event.preventDefault();
    }).removeClass('disabled');
});
Mike
quelle
4

Sie können keine Links zu "deaktiviert" setzen, nur Systemelemente wie Eingabe, Textfeld usw.

Sie können jedoch Links mit jQuery / JavaScript deaktivieren

$('.disabled').click(function(e){
    e.preventDefault();
});

Wickeln Sie einfach den obigen Code ein, falls Sie die Links deaktivieren möchten.

Hallo Welt
quelle
0

Ich habe gerade das Attribut 'href' aus dem Ankertag entfernt, das ich deaktivieren möchte

$ ('# idOfAnchorTag'). removeAttr ('href');

$ ('# idOfAnchorTag'). attr ('class', $ ('# idOfAnchorTag'). attr ('class') + 'disabled');

So hängen Sie meinen deaktivierten Wert an das Klassenattribut an

n es ist vollständig deaktiviert.

asifaftab87
quelle