âncoras desativar no Google Chrome / WebKit / Safari

Question

Considere o seguinte código:

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

No IE e FF, isto fará âncoras unclickable, mas em navegadores baseados no WebKit (Google Chrome e Safari) isso não faz nada. A coisa agradável sobre o atributo disabled é que ele é facilmente removido e não afeta a href e onclick atributos.

Você tem alguma sugestão sobre como obter o resultado desejado. As respostas devem ser:

• ser facilmente revertable, pois quero desativar os controles de entrada de formulário enquanto eu tenho uma chamada de AJAX em execução.
• Deve trabalhar no IE, FF e WebKit

Answer 1

Eu supor que você tem um manipulador de eventos onclick ligado a estes elementos de ancoragem. Apenas ter seu manipulador de eventos verificar o atributo "desativado" e cancelar o evento se estiver definido. O manipulador de eventos seria algo parecido com isto:

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

Você também pode definir uma regra de estilo para alterar o cursor.

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

Edit -. Simplificou a seleção "desativado", como sugerido nos comentários

Answer 2

Eu tive que corrigir esse comportamento em um site com um monte de âncoras que estavam sendo ativado / desativado com este atributo de acordo com outras condições, etc. Talvez não ideal, mas em uma situação como essa, se você não preferir corrigir o código de cada âncora individualmente, isso vai fazer o truque para todas as âncoras:

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