Désactiver les ancres dans Chrome / WebKit / Safari

Question

Considérez le code suivant:

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

Dans IE et FF, cela rendra les ancres non cliquables, mais dans les navigateurs WebKit (Google Chrome et Safari), cela ne fait rien. La bonne chose à propos de l’attribut disabled est qu’il est facile à supprimer et n’affecte pas les attributs href et onclick.

Avez-vous des suggestions pour obtenir le résultat souhaité? Les réponses doivent être:

• Soyez facilement réversible, car je souhaite désactiver les contrôles de saisie de formulaire pendant l'exécution d'un appel AJAX.
• Doit fonctionner dans IE, FF et WebKit

Answer 1

Je suppose que vous avez un gestionnaire d'événement onclick lié à ces éléments d'ancrage. Demandez simplement à votre gestionnaire d’événements de vérifier l’option " disabled " attribuer et annuler l'événement s'il est défini. Votre gestionnaire d'événement ressemblerait à quelque chose comme ceci:

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

Vous pouvez également définir une règle de feuille de style pour changer le curseur.

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

Modifier - simplifie la " désactivée " vérifier comme suggéré dans les commentaires.

Answer 2

J'ai dû résoudre ce problème dans un site comportant de nombreuses ancres activées / désactivées avec cet attribut en fonction d'autres conditions, etc. Peut-être pas idéal, mais dans une situation comme celle-là, si vous préférez ne pas corriger le code de chaque ancre individuellement, cela fera l'affaire pour toutes les ancres:

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

Et:

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