Deaktivieren Sie Anker in Chrome / WebKit / Safari

Question

Betrachten Sie den folgenden Code ein:

$("a").attr("disabled", "disabled");

Im IE und FF wird dieser Anker unclickable machen, aber in WebKit-basierten Browsern (Google Chrome und Safari) dies tut nichts. Die nette Sache über das disabled-Attribut ist, dass es leicht entfernt und hat keine Auswirkungen auf die href und Onclick Attribute.

Haben Sie Vorschläge, wie man das gewünschte Ergebnis zu erhalten. Die Antworten müssen sein:

• Leicht reversionsfähige sein, da ich Formulareingabe steuert deaktivieren möchten, während ich einen AJAX-Aufruf laufen haben.
• Müssen in IE, FF arbeiten und WebKit

Answer 1

Ich gehe davon aus, dass Sie ein Onclick-Ereignishandler auf diese Ankerelemente gebunden haben. Haben Sie einfach Ihre Event-Handler die „disabled“ -Attribut überprüfen und die Veranstaltung abzusagen, wenn es gesetzt ist. Ihre Event-Handler in etwa so aussehen:

$("a").click(function(event){
  if (this.disabled) {
    event.preventDefault();
  } else {
    // make your AJAX call or whatever else you want
  }
});

Sie können auch ein Stylesheet-Regel setzen Sie den Cursor zu ändern.

a[disabled=disabled] { cursor: wait; }

Bearbeiten -. Vereinfacht die "disabled" Kontrolle wie in den Kommentaren vorgeschlagen

Answer 2

Ich hatte dieses Verhalten in einer Site zu beheben mit viel Anker, die mit diesem Attribut aktiviert wurden nach anderen Bedingungen / Behinderte usw. Vielleicht nicht ideal, aber in einer Situation wie dieser, wenn Sie nicht lieber beheben jeder Code einzeln des Ankers, das den Trick für alle Anker tun:

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

Und:

a[disabled] {
    color: gray;
    text-decoration: none;
}