seccion - ¿Debería la Etiqueta de anclaje HTML honrar al atributo deshabilitado?

link a seccion especifica de otra pagina

Question

Si creo una etiqueta anclaje HTML y establezco el atributo disabled en verdadero, obtengo comportamientos diferentes en diferentes navegadores (¡sorpresa! ¡Sorpresa!).

fiddle un fiddle para demostrar.

En IE9, el enlace está atenuado y no se transfiere a la ubicación HREF. En Chrome / FF / Safari, el enlace es el color normal y se transferirá a la ubicación de HREF.

¿Cuál debería ser el comportamiento correcto? ¿IE9 está procesando esto incorrectamente y debería implementar algún CSS y javascript para solucionarlo? o Chrome / FF / Safari no es correcto y eventualmente se pondrá al día?

Gracias por adelantado.

Answer 1

IE parece estar actuando incorrectamente en esta instancia.

Ver la especificación de HTML5

El atributo IDL deshabilitado solo se aplica a los enlaces de hoja de estilo. Cuando el elemento de enlace define un enlace de hoja de estilo, el atributo deshabilitado se comporta como se define para las hojas de estilo alternativas DOM. Para todos los demás elementos de enlace siempre devuelve falso y no hace nada en la configuración.

http://dev.w3.org/html5/spec/Overview.html#the-link-element

La especificación HTML4 ni siquiera menciona disabled

http://www.w3.org/TR/html401/struct/links.html#h-12.2

EDITAR

Creo que la única forma de obtener este efecto entre navegadores es js / css de la siguiente manera:

#link{
    text-decoration:none;
    color: #ccc;
}

js

$(''#link'').click(function(e){
    e.preventDefault();
});

Ejemplo: http://jsfiddle.net/jasongennaro/QGWcn/

Answer 2

La respuesta de JQuery no me funcionó porque mi etiqueta de anclaje está en un formulario y en mis formularios utilizo validadores de campo asp y simplemente no jugaban bien. Esto me llevó a encontrar una respuesta bastante simple que no requiere JQuery o CSS ...

<a id="btnSubmit" href="GoSomePlace">Display Text</a>

Puede desactivar el elemento y debe comportarse como lo hacen los tipos de entrada. No se necesita CSS Esto funcionó para mí en cromo y ff.

function DisableButton() {
    var submitButton = document.getElementById("btnSubmit");
    if (submitButton != null) {
        submitButton.setAttribute(''disabled'', ''disabled'');
    }
}

Por supuesto, harás un ciclo para deshabilitar todas las etiquetas de anclaje en el DOM, pero mi ejemplo muestra cómo hacerlo solo para un elemento específico. Desea asegurarse de que está obteniendo el ID de cliente correcto de su elemento, pero esto funcionó para mí, en más de una ocasión. Esto también funcionará en asp: LinkButtons que terminan siendo elementos de etiqueta de anclaje cuando se procesan en el navegador.

Answer 3

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;
}

Answer 4

disabled es un atributo que solo se aplica a input elementos de input según los standards . Es posible que IE lo admita en a , pero en su lugar querrá usar CSS / JS si quiere cumplir con los estándares.