Wie aktiviere oder deaktiviere ich einen Anker mit jQuery?

Wie aktiviere oder deaktiviere ich einen Anker mit jQuery?

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

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;

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.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

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/

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;
}

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");

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;
})

$('#divID').addClass('disabledAnchor');

In CSS-Datei

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

$("a").click(function(event) {
  event.preventDefault();
});

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

Wenn Sie versuchen, alle Interaktionen mit der Seite zu blockieren, sollten Sie sich das jQuery BlockUI Plugin ansehen

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.

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

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(); 

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)

Deaktivieren oder aktivieren Sie jedes Element mit der Eigenschaft disabled.

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

// Enable
$( "#myAnchor" ).prop( "disabled", false );