jquery - Deshabilitar anclajes en Chrome/WebKit/Safari

detect browser javascript

Question

Considera el siguiente código:

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

En IE y FF, esto hará que los anclajes no se puedan cliquear, pero en los navegadores basados ​​en WebKit (Google Chrome y Safari) esto no hace nada. Lo bueno del atributo disabled es que se elimina fácilmente y no afecta los atributos href y onclick.

¿Tiene alguna sugerencia sobre cómo obtener el resultado deseado? Las respuestas deben ser:

• Fácilmente ser revertable, ya que quiero desactivar los controles de entrada de formulario mientras tengo una llamada AJAX en ejecución.
• Debe funcionar en IE, FF y WebKit

Answer 1

Supongo que tiene un controlador de evento onclick vinculado a estos elementos de anclaje. Simplemente haga que su controlador de eventos verifique el atributo "deshabilitado" y cancele el evento si está configurado. Su controlador de eventos se vería así:

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

También puede establecer una regla de hoja de estilo para cambiar el cursor.

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

Editar: simplificó la verificación "desactivada" como se sugiere en los comentarios.

Answer 2

Tuve que corregir este comportamiento en un sitio con muchos anclajes que se activaban / desactivaban con este atributo de acuerdo con otras condiciones, etc. Tal vez no es ideal, pero en una situación como esa, si prefieres no corregir el código de cada anclaje individualmente, esto hará el truco para todos los anclajes:

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

Y:

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