wake-up-neo.net

Deaktivieren Sie einen Hyperlink mit jQuery

<a href="gohere.aspx" class="my-link">Click me</a>

Ich tat

$('.my-link').attr('disabled', true);

aber es hat nicht funktioniert

Gibt es eine einfache Möglichkeit, den Hyperlink mit jquery zu deaktivieren? Href entfernen? Ich würde lieber nicht mit href herumspielen. Wenn ich es also schaffen würde, ohne href zu entfernen, wäre das großartig.

59
sarsnake

Sie können einen Klick-Handler binden, der false zurückgibt:

$('.my-link').click(function () {return false;});

Um es wieder zu aktivieren, binden Sie den Handler ab:

$('.my-link').unbind('click');

Beachten Sie, dass disabled nicht funktioniert, da es nur für Formulareingaben vorgesehen ist.


jQuery hat dies bereits vorweggenommen und bietet ab jQuery 1.4.3 eine Verknüpfung:

$('.my-link').bind('click', false);

Und um zu lösen/wieder zu aktivieren:

$('.my-link').unbind('click', false);
118
David Tang

Ich weiß, dass es eine alte Frage ist, aber sie scheint immer noch ungelöst zu sein. Folgt meiner Lösung ...

Fügen Sie einfach diesen globalen Handler hinzu:

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

Hier ist eine kurze Demo: http://jsbin.com/akihik/

sie können sogar ein bisschen CSS hinzufügen, um allen Links mit dem Attribut disabled einen anderen Stil zu verleihen.

z.B

a[disabled]
{
    color: grey; 
}

Wie auch immer, es scheint, dass das deaktivierte Attribut für a Tags nicht gültig ist. Wenn Sie die w3c-Spezifikationen bevorzugen, können Sie problemlos ein HTML5-konformes Attribut data-disabled Übernehmen. In diesem Fall müssen Sie das vorherige Snippet ändern und $(this).data('disabled') verwenden.

33
Luciano Mammino

Das Entfernen des href Attributs scheint definitiv der richtige Weg zu sein. Wenn Sie es später aus irgendeinem Grund benötigen, würde ich es einfach in einem anderen Attribut speichern, z.

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

Dies ist die einzige Möglichkeit, die den Link deaktiviert erscheinen lässt, ohne benutzerdefiniertes CSS zu schreiben. Wenn Sie nur einen Klick-Handler an false binden, wird der Link wie ein normaler Link angezeigt. Wenn Sie jedoch darauf klicken, geschieht nichts, was für Benutzer verwirrend sein kann. Wenn Sie die Click-Handler-Route gehen, würde ich zumindest auch .addClass("link-disabled") und einige CSS schreiben, die Links mit dieser Klasse wie normalen Text erscheinen lassen.

10
Riley Dutton
$('.my-link').click(function(e) { e.preventDefault(); }); 

Du könntest benutzen:

$('.my-link').click(function(e) { return false; }); 

Aber ich benutze dies nicht gerne selbst, da es kryptischer ist, obwohl es in vielen jQuery-Codes häufig verwendet wird.

8
Neil

Das pointer-events CSS-Eigenschaft fehlt ein wenig, wenn es um Unterstützung geht ( caniuse.com ), aber es ist sehr prägnant:

.my-link { pointer-events: none; } 
7
tiffon
function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}
4
Abhishek Bandil

Hänge eine Klasse an, die Zeigerereignisse enthält: non

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');
2
Andrien Pecson

Das disabled -Attribut ist nicht für alle HTML-Elemente gültig, siehe MSDN-Artikel . Das und der richtige Wert für disabled ist einfach "disabled". Am besten binden Sie eine Klickfunktion, die false zurückgibt.

2
wsanville

Unten wird der Link durch den Text ersetzt

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

Bearbeiten:

Der oben angegebene Code funktioniert nur mit Hyperlinks mit Text, nicht mit Bildern. Wenn wir es mit dem Bildlink versuchen, wird kein Bild angezeigt.

Um diesen Code mit Bildlinks kompatibel zu machen, funktionieren die folgenden Schritte einwandfrei

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

Erklärung: In den oben angegebenen Codeausschnitten ersetzen wir im ersten Ausschnitt alle Bildverknüpfungen durch nur die Bilder. Danach ersetzen wir Textlinks durch den Text.

1
IT ppl

Das funktioniert auch gut. Ist einfach, leicht und erfordert keine Verwendung von jQuery.

<a href="javascript:void(0)">Link</a>
0
Bradley Flood