258 votos

Cómo deshabilitar los enlaces HTML

Tengo un botón de enlace dentro de un TD que tengo que desactivar. Esto funciona en IE, pero no funciona en Firefox y Chrome. La estructura es de Enlace dentro de un TD. No puedo agregar cualquier recipiente en el TD (como div/span)

He probado todos los siguientes, pero no funciona en Firefox (utilizando 1.4.2 js):

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

Nota - no puedo des-registrar el clic de la función de la etiqueta de anclaje como es registrado de forma dinámica. Y TENGO QUE MOSTRAR EL ENLACE EN MODO DESHABILITADO.

501voto

Adriano Repetti Puntos 22087

No se puede deshabilitar un enlace (en un portátil). Pruebe uno de los siguientes:

CSS manera

Esta debe ser la forma correcta de hacerlo cuando la mayoría de los navegadores admiten:

a {
    pointer-events: none;
}

En realidad (2013) es bien soportado sólo por Chrome, FireFox y Opera (sólo las últimas versiones). Internet Explorer comenzó a apoyar esta sólo a partir de la versión 11.

Solución

Que dijo que tiene la suerte: es decir, admite el atributo disabled de enlaces (donde otros navegadores no) así que utilizado junto con a[disabled] que va a hacer el truco (si no se tienen en cuenta las versiones anteriores de Opera, por lo que todavía tiene que usar uno de los otros trucos que junto con esto):

a[disabled] {
    pointer-events: none;
}

Funciona tanto en IE y a los demás, porque el IE ignorar pointer-events más que el honor disabled y que los otros honor pointer-events pero ignorar disabled.

Interceptar clics

El uso de un href a una función de JavaScript, comprobar la condición (o el atributo disabled sí mismo) y no hacer nada en caso de que.

$("td > a").on("click", function(event){
    if ($(this).attr('disabled') != undefined) {
        event.preventDefault();
    }
});

Para desactivar los enlaces que hacer esto:

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

Para volver a activar:

$("td > a").removeAttr("disabled");

Me echa para undefined porque jQuery 1.6+ siempre devuelve este valor cuando el atributo no está definido. Esto evita esotérico comprobaciones sobre el real valor de atributo (para deshabilitar un control que usted simplemente necesita para definir ese atributo, su valor no importa). Yo solía on en lugar de live a salvarme de su extraño comportamiento, si añadir enlaces en tiempo de ejecución puede utilizar live lugar.

Borrar el enlace

Borrar el href de atributo. Con este código no agregar un controlador de eventos, sino de cambiar el propio enlace. Utilice este código para desactivar los enlaces:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

Y esta para re-activar:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

Personalmente no me gusta esta solución mucho (si usted no tiene que hacer más con discapacidad enlaces), pero puede ser más compatible, debido a varias manera de seguir un enlace.

Falso haga clic en controlador de

Agregar/quitar una onclick función de donde return false, el enlace no ser seguido. Para desactivar los enlaces:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Para volver a activar:

$("td > a").removeAttr("disabled").off("click");

No creo que hay una razón para preferir esta solución en lugar de la primera.

Estilo

El estilo es aún más simple, cualquiera que sea la solución que usted está utilizando para deshabilitar el enlace que le hizo añadir un disabled atributo de modo que usted puede utilizar la siguiente regla CSS:

a[disabled] {
    color: gray;
}

23voto

Ankit Puntos 1447

Tengo la revisión en el css.

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

Por encima de css cuando se aplica a la etiqueta de anclaje deshabilitará el evento click.

Para detalles de la retirada de este enlace

7voto

Kees C. Bakker Puntos 7504

Pruebe el elemento:

$(td).find('a').attr('disabled', 'disabled');

La desactivación de un enlace que a mi me funciona en Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/.

Firefox no parecen jugar bonito. Este ejemplo funciona:

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$('a').live('click', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

Nota: se ha añadido un "en vivo" instrucción para el futuro desactivado / activado enlaces.

0voto

Pranav Puntos 3022

no se puede deshabilitar un enlace, si quieres que haga clic en eventos no debe fuego, a continuación, simplemente, Remove el action a partir de ese vínculo.

$(td).find('a').attr('href', '');

Para Más Info :- Elementos que pueden ser desactivadas

0voto

mkk Puntos 4071

Me gustaría hacer algo como

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

algo como esto debería funcionar. Agregar una clase para los enlaces que desee tener deshabilitado y, a continuación, devuelve false cuando alguien haga clic en ellos. Para habilitar les acaba de quitar la clase.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X