Disabilita le ancore in Chrome / WebKit / Safari

Question

Considera il seguente codice:

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

In IE e FF, questo renderà le ancore non cliccabili, ma nei browser basati su WebKit (Google Chrome e Safari) questo non fa nulla. La cosa bella dell'attributo disabilitato è che può essere facilmente rimosso e non influisce sugli attributi href e onclick.

Hai qualche suggerimento su come ottenere il risultato desiderato. Le risposte devono essere:

• Siate facilmente riverificabili, poiché desidero disabilitare i controlli di input del modulo mentre ho una chiamata AJAX in esecuzione.
• Deve funzionare in IE, FF e WebKit

Answer 1

Suppongo che tu abbia un gestore di eventi onclick associato a questi elementi di ancoraggio. Chiedi al gestore dell'evento di controllare " disabilitato " attribuire e annullare l'evento se è impostato. Il gestore dell'evento sarebbe simile al seguente:

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

Puoi anche impostare una regola del foglio di stile per cambiare il cursore.

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

Modifica: ha semplificato la funzione "disabilitato" controlla come suggerito nei commenti.

Answer 2

Ho dovuto correggere questo comportamento in un sito con molte ancore che venivano abilitate / disabilitate con questo attributo in base ad altre condizioni, ecc. Forse non l'ideale, ma in una situazione del genere, se preferisci non risolvere ogni codice di ancoraggio individualmente, questo farà il trucco per tutte le ancore:

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

E

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