Wie aktiviere oder deaktiviere ich einen Anker mit jQuery?

150

Wie aktiviere oder deaktiviere ich einen Anker mit jQuery?

Senthil Kumar Bhaskaran
quelle
Vielen Dank für Ihre Antwort, noch ist es nicht so arbeiten , können Sie bitte machen es mit document.ready Funktion arbeiten
Senthil Kumar Bhaskaran
Es kann hilfreich sein, wenn Sie den Codeausschnitt veröffentlichen, der nicht funktioniert.
Hurra, ich
Eigentlich ist meine Codierung in Rails und meine Codierung ist <% = foo.add_associated_link ('E-Mail hinzufügen', @ project.email.build)%> Wenn ich sie in einen Browser rendere, kann ich die E-Mail sehen, aber ich kann sie nicht deaktivieren, selbst wenn ich versucht mit Codierung wie e.preventDefault (), aber ohne Ergebnis
Senthil Kumar Bhaskaran

Antworten:

194

Um zu verhindern, dass ein Anker den angegebenen Anforderungen entspricht href, würde ich Folgendes verwenden preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Sehen:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Siehe auch diese vorherige Frage zu SO:

jQuery deaktiviert einen Link

karim79
quelle
Ich habe mit diesen "attr" versucht, dass es nur auf Formularelementen funktioniert, nicht auf Anchor-Tags.
Senthil Kumar Bhaskaran
1
@senthil - PreventDefault wird als die "richtige" Methode angesehen, siehe meine Bearbeitung (Link zu einem anderen Q + A)
karim79
Eigentlich ist meine Codierung in Rails und meine Codierung ist <% = foo.add_associated_link ('E-Mail hinzufügen', @ project.email.build)%> Wenn ich sie in einen Browser rendere, kann ich die E-Mail sehen, aber ich kann sie nicht deaktivieren, selbst wenn ich versucht mit Codierung wie e.preventDefault (), aber ohne Ergebnis
Senthil Kumar Bhaskaran
2
Wie kehre ich um $('a.something').on("click", function (e) { e.preventDefault(); });?
ス レ ッ ク ス
2
Nicht einverstanden, verwenden Sie CSS "Zeiger-Ereignisse: keine;" stattdessen genau wie in anderen Antworten.
Vitrilo
116

Die App, an der ich gerade arbeite, arbeitet mit einem CSS-Stil in Kombination mit Javascript.

a.disabled { color:gray; }

Wann immer ich dann einen Link deaktivieren möchte, rufe ich an

$('thelink').addClass('disabled');

Dann führe ich im Klick-Handler für 'den Link' eines Tags immer als erstes eine Prüfung durch

if ($('thelink').hasClass('disabled')) return;
AgileJon
quelle
6
Sollte diese letzte Zeile nicht "return false" sagen?
Prestaul
1
Guter Anruf, Prestaul. Wenn ich an ein <a> -Tag gebunden bin, verwende ich: <a href="whatever" onclick="return disableLink(this)"> .. dann: function disableLink (node) {if (dojo.hasClass (node, 'disabled') return false; dojo.addClass (Knoten, 'disabled'); return true;} .. Dadurch kann der Link einmal angeklickt werden und action (return true) und danach die Aktion nicht mehr zurückgeben (return falsch).
Neek
Beachten Sie, dass Sie im Handler wahrscheinlich $ (this) anstelle von $ ("thelink") verwenden sollten, da sich dies ändern könnte oder der Benutzer den Code auf diese Weise einfach kopieren / einfügen könnte.
Alexis Wilke
2
Schlagen Sie vor, dass Sie dem deaktivierten Stil auch "Cursor: Standard" hinzufügen.
Stuart Hallows
40

Ich fand eine Antwort , dass Ich mag viel besser hier

Sieht aus wie das:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

Zum Aktivieren müsste das href-Attribut festgelegt werden

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Dies gibt Ihnen den Eindruck, dass das Ankerelement zu normalem Text wird und umgekehrt.

Michael Meadows
quelle
12
$("a").click(function(){
                alert('disabled');
                return false;

}); 
AlexC
quelle
12

Ich denke, eine schönere Lösung besteht darin, das Attribut deaktivierte Daten zu aktivieren und beim Klicken eine Überprüfung darauf zu verankern. Auf diese Weise können wir einen Anker vorübergehend deaktivieren, bis z. B. das Javascript mit einem Ajax-Aufruf oder einigen Berechnungen beendet ist. Wenn wir es nicht deaktivieren, können wir schnell ein paar Mal darauf klicken, was unerwünscht ist ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Ich habe ein jsfiddle-Beispiel gemacht: http://jsfiddle.net/wgZ59/76/

Michal B.
quelle
11

Ausgewählte Antwort ist nicht gut.

Verwenden Sie Zeiger-Ereignisse CSS - Stil. (Wie Rashad Annara vorgeschlagen hat)

Siehe MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Es wird in den meisten Browsern unterstützt.

Das einfache Hinzufügen des Attributs "deaktiviert" zum Anker erledigt den Job, wenn Sie eine globale CSS-Regel wie die folgende haben:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}
Vitrilo
quelle
Auch bei Zeigerereignissen müssen Sie den Status: hover nicht einschließen, da dies ein Zeigerereignis ist. Sie müssen nur den [deaktivierten] Selektor einschließen.
Larry Dukek
10

Versuchen Sie die folgenden Zeilen

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, auch wenn Sie <a>Tag deaktivieren href, funktioniert, so müssen Sie auch entfernen href.

Wenn Sie aktivieren möchten, versuchen Sie es unter den folgenden Zeilen

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
Victor AJ
quelle
1
Dies ist genau das, was ich brauchte, wenn ich JQuery mit ASP.net MVC ActionLink verwendete. Vielen Dank!
eaglei22
8

Es ist so einfach wie false zurückgeben.

Ex.

jQuery("li a:eq(0)").click(function(){
   return false;
})

oder

jQuery("#menu a").click(function(){
   return false;
})
Kim Edgard
quelle
8
$('#divID').addClass('disabledAnchor');

In CSS-Datei

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}
Rashad Valliyengal
quelle
5
$("a").click(function(event) {
  event.preventDefault();
});

Wenn diese Methode aufgerufen wird, wird die Standardaktion des Ereignisses nicht ausgelöst.

Mohssen Beiranvand
quelle
4

Sie haben nie wirklich angegeben, wie Sie sie deaktivieren möchten oder was die Deaktivierung verursachen würde.

Zunächst möchten Sie herausfinden, wie Sie den Wert auf deaktiviert setzen. Dazu würden Sie die Attributfunktionen von JQuery verwenden und diese Funktion für ein Ereignis wie einen Klick oder das Laden des Dokuments ausführen.

Hinterhältigkeit
quelle
1

In Situationen, in denen Sie Text- oder HTML-Inhalte in ein Ankertag einfügen müssen, aber einfach nicht möchten, dass beim Klicken auf dieses Element eine Aktion ausgeführt wird (z. B. wenn ein Paginator-Link deaktiviert sein soll, weil er aktiviert ist) die aktuelle Seite), einfach die href ausschneiden. ;)

<a>3 (current page, I'm totally disabled!)</a>

Die Antwort von @ michael-meadows hat mich darauf hingewiesen, aber er hat immer noch Szenarien angesprochen, in denen Sie noch mit jQuery / JS arbeiten müssen / müssen. Wenn Sie in diesem Fall die Kontrolle über das Schreiben des HTML-Codes selbst haben, müssen Sie lediglich das href-Tag x-xen. Die Lösung ist also eine reine HTML-Lösung!

Bei anderen Lösungen ohne jQuery-Finagling, bei denen die href beibehalten wird, müssen Sie ein # in die href einfügen. Dadurch springt die Seite jedoch nach oben, und Sie möchten nur, dass sie einfach deaktiviert ist. Oder lassen Sie es leer, aber je nach Browser funktioniert das immer noch so, als würde man nach oben springen, und es ist laut IDEs ungültiges HTML. Aber anscheinend ist ein aTag völlig gültiges HTML ohne HREF.

Zuletzt könnten Sie sagen: Okay, warum nicht einfach das a-Tag insgesamt ausgeben als? Da dies häufig nicht möglich ist, wird das aTag im CSS-Framework oder Steuerelement, das Sie verwenden, für Stylingzwecke verwendet, z. B. der Paginator von Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Nicholas Petersen
quelle
1

Mit einer Kombination der obigen Antworten kam ich auf diese Idee.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 
LawMan
quelle
0

Wenn Sie es nicht als Ankertag benötigen, würde ich es lieber ersetzen. Zum Beispiel, wenn Ihr Ankertag wie ist

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

Mit jquery können Sie dies tun, wenn Sie Text anstelle eines Links anzeigen müssen.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

Auf diese Weise können wir das Ankertag einfach durch ein div-Tag ersetzen. Dies ist viel einfacher (nur 2 Zeilen) und auch semantisch korrekt (da wir jetzt keinen Link benötigen und daher keinen Link haben sollten)

adeel41
quelle
0

Deaktivieren oder aktivieren Sie jedes Element mit der Eigenschaft disabled.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );
RitchieD
quelle
Warum wird diese Antwort abgelehnt? Es beantwortet die Frage "Wie kann ich einen Anker mit jQuery aktivieren oder deaktivieren?"
RitchieD
Ich glaube, das liegt daran, dass beim Klicken auf den Anker immer noch Links geöffnet werden.
Zombaya