Wie aktiviert oder deaktiviert man einen Anker mit jQuery?

Question

Wie aktiviert oder deaktiviert man einen Anker mit jQuery?

Answer 1

Um einen Anker aus nach dem angegebenen href zu verhindern, würde ich preventDefault() schlage vor, mit:

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

See:

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

Siehe auch diese vorherige Frage auf SO:

jQuery disable a link

Answer 2

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

}); 

Answer 3

Wenn Sie versuchen, alle Interaktion mit der Seite zu blockieren könnten Sie am jQuery BlockUI Plugin

Answer 4

Sie gaben nie wirklich sehen wollen, wie Sie sie deaktiviert wollte, oder was würde die Sperrung führen.

Erstens wollen Sie, um herauszufinden, wie der Wert für Behinderte einzustellen, für die Sie JQuery's Attribute Functions verwenden würden, und haben diese Funktion auf einem event, wie ein click oder der loading des Dokuments geschehen.

Answer 5

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

a.disabled { color:gray; } 

Dann, wenn ich einen Link deaktivieren nenne ich

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

Dann wird in dem Click-Handler für 'TheLink' ein Tag habe ich immer einen Scheck erste, was laufen

if ($('thelink').hasClass('disabled')) return; 

Answer 6

Es ist so einfach wie falsch zurückgeben;

ex.

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

oder

jQuery("#menu a").click(function(){ 
    return false; 
}) 

Answer 7

fand ich eine Antwort, die Ich mag viel besser here

wie folgt aussieht:

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

Das Attribut href Einstellung aktivieren, beinhalten würde

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

Dies gibt Ihnen das Aussehen, dass das Ankerelement normaler Text wird, und umgekehrt.

Answer 8

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

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

Answer 9

Ich denke, eine bessere Lösung besteht darin, das deaktivierte Datenattribut einzuschalten und es beim Anklicken zu verankern. Auf diese Weise können wir vorübergehend einen Anker deaktivieren, bis z.B.Das Javascript ist mit einem Ajax-Aufruf oder einigen Berechnungen abgeschlossen. Wenn wir es nicht deaktivieren, dann können wir es schnell ein paar Mal auf, 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: http://jsfiddle.net/wgZ59/76/

Answer 10

Für Situationen, in denen Sie Text setzen müssen oder html Inhalt innerhalb eines Anchor-Tags, aber Sie möchten einfach keine Aktion ausführen, wenn auf dieses Element geklickt wird (z. B. wenn Sie möchten, dass eine Paginator-Verknüpfung deaktiviert ist, weil es die aktuelle Seite ist) href. ;)

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

Die Antwort von @ michael-Wiesen kippte mir dies ab, aber seine war noch Szenarien Adressierung, wo man noch mit jQuery/JS müssen/arbeiten. In diesem Fall wenn Sie die Kontrolle über das Schreiben der HTML selbst haben, einfach x-ing der href-Tag ist alles was Sie tun müssen, so ist die Lösung eine reine HTML-Lösung!

Andere Lösungen ohne jQuery Finagling, die die href beibehalten müssen Sie ein # in die href setzen, aber das führt dazu, dass die Seite nach oben springt, und Sie wollen nur, dass es einfach alt deaktiviert ist. Oder lassen Sie es leer, aber je nach Browser, das macht immer noch Dinge wie zum Anfang, und es ist ungültig HTML nach den IDEs. Aber anscheinend ist ein a Tag vollständig gültiges HTML ohne ein HREF.

Schließlich könnten Sie sagen: Okay, warum nicht einfach das a-Tag als Ganzes dump? Denn oft können Sie nicht, wird das a Tag für Styling Zwecke in der CSS-Framework verwendet, oder steuern Sie verwenden, wie Bootstrap des paginator:

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

Answer 11

Versuchen Sie, die folgenden Zeilen

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

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

Wenn Sie aktivieren möchten versuchen unten Linien

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

Answer 12

Wenn Sie es nicht als ein Anker-Tag verhalten, dann würde ich es vorziehen, es überhaupt zu ersetzen. Zum Beispiel wenn Ihr Anker-Tag ist wie

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

dann jquery verwenden Sie dies tun können, wenn Sie Text anstelle eines Links angezeigt werden müssen.

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

So können wir einfach Anker-Tag mit einem Div-Tag ersetzen. Das ist viel einfacher (nur 2 Linien) und semantisch korrekte und

Answer 13

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

In CSS-Datei So

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

Answer 14

(weil wir daher eine Verbindung haben, sollten nicht jetzt nicht einen Link benötigen) mit eine Kombination der obigen Antworten, kam ich auf diese.

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

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

Answer 15

Deaktivieren oder aktivieren Sie ein beliebiges Element mit der deaktivierten Eigenschaft.

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

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

Answer 16

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.

Simple „deaktiviert“ Attribut Hinzufügen um den Job zu verankern tun, wenn Sie wie folgende globale CSS-Regel haben:

a[disabled], a[disabled]:hover { 
    pointer-events: none; 
    color: #e1e1e1; 
}