Désactiver les ancres dans Chrome / WebKit / Safari
-
05-07-2019 - |
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
La solution
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.
Autres conseils
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;
}