jQuery deshabilita un enlace

284

¿Alguien sabe cómo deshabilitar un enlace en jquery SIN usar return false;?

Específicamente, lo que estoy tratando de hacer es deshabilitar el enlace de un elemento, hacer clic en él usando jquery que activa algunas cosas, luego volver a habilitar ese enlace para que si se vuelve a hacer clic funcione de manera predeterminada.

Gracias. Dave

ACTUALIZACIÓN Aquí está el código. Lo que debe hacer después de que .expandedse haya aplicado la clase es volver a habilitar el enlace deshabilitado.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});
davebowker
fuente
77
¿Por qué el requisito de no usar return false? Úselo y luego elimine el controlador de eventos cuando ya no se aplique (o ponga un condicional en él para devolver diferentes valores dependiendo del estado de las "algunas cosas" mencionadas).
Quentin
¿Estás tratando de hacer un preprocesamiento antes de seguir el enlace en la misma acción de clic? es decir, no está proponiendo dos clics, sino que el usuario hace clic en el enlace, ocurren algunas acciones, se sigue el enlace
Lázaro
De lo contrario, ¿puede explicar por qué está adoptando este enfoque ya que una mejor comprensión del espacio del problema mejorará las respuestas.
Lázaro
@lazarus, propongo 2 clics en el mismo enlace. 1 para hacer algunas cosas primero, luego el segundo para tratar el enlace como un enlace.
davebowker
@daviddorward, hasta ahora he intentado devolver false y continúa hasta la segunda parte de mi objetivo, es decir, no permitir que pase el segundo clic. Si pudiera escribir un breve ejemplo, estaría muy agradecido.
davebowker

Respuestas:

364
$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Eso evitará el comportamiento predeterminado de un hipervínculo, que es visitar el href especificado.

Del tutorial de jQuery :

Para los clics y la mayoría de los otros eventos, puede evitar el comportamiento predeterminado, aquí, siguiendo el enlace a jquery.com, llamando a event.preventDefault () en el controlador de eventos

Si desea hacerlo preventDefault()solo si se cumple una determinada condición (algo está oculto, por ejemplo), puede probar la visibilidad de su ul con la clase expandida . Si es visible (es decir, no está oculto), el enlace debería activarse normalmente, ya que la instrucción if no se ingresará y, por lo tanto, no se evitará el comportamiento predeterminado:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});
karim79
fuente
3
Con jQuery 1.7+ puede usar encendido / apagado: stackoverflow.com/questions/209029/…
Lance Cleveland
si tiene un href y onclick esto funcionará $ ("# myLink"). attr ('onclick', '') .click (function (e) {e.preventDefault ();});
Ronald McDonald
me di cuenta a través de ajax y jquery que puedo ocultar una compra href con la devolución de llamada para evitar que los raspadores obtengan estos enlaces. ¡Genial gracias!
Cesar Bielich
esta publicación tiene la forma más fácil de usar bootstrap , espero que ayude.
shaijut
107

Prueba esto:

$("a").removeAttr('href');

EDITAR-

De su código actualizado:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);
TStamper
fuente
3
Jugar con href es muy bueno porque es una forma rápida de deshabilitar un enlace que actúa mediante un evento onclick. Muy muy listo!
daitangio
dulce método para evitar que el navegador agregue el # dentro de la URI al hacerhref="#"
Abela
65

Para otros que vinieron aquí a través de Google como yo, aquí hay otro enfoque:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

Recuerde: no solo esta es una clase CSS

clase = "estilo de botón"

pero también estos dos

clase = "estilo de botón deshabilitado"

para que pueda agregar y eliminar fácilmente más clases con jQuery. No es necesario tocar href ...

¡Amo jQuery! ;-)

Hein
fuente
2
esto supone que el enlace no tiene objetivo :)
dstarh
2
En lugar de hacer toda esta fantasía, ¿por qué no simplemente agregar el onclick más alto en el dom, usar on()para filtrar todos los a.disabledenlaces y evitar el defecto? Entonces, todo lo que tiene que hacer es activar / desactivar la clase deshabilitada y el enlace se manejará solo cuando esté "habilitado".
CodeChimp
No es necesario el "== verdadero" - addClass ('disabled') se ejecutará independientemente. if(disabledCondition)
Fox Wilson
1
@fwilson, si bien tienes toda la razón, para un programador principiante, es más fácil de entender con el == true. :)
carmenismo
¿Alguna razón particular para no simplificarlo if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Mir
58

Aquí hay una solución alternativa css / jQuery que prefiero por su brevedad y sus secuencias de comandos minimizadas:

css:

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});
Peter DeWeese
fuente
77
De Mozilla : "Advertencia: el uso de eventos de puntero en CSS para elementos que no son SVG es experimental. La característica solía ser parte de la especificación borrador de CSS UI pero, debido a muchos problemas abiertos, se ha pospuesto a CSS4".
marcadores de duelin
1
Es una buena consideración, pero resulta que funciona bien en la mayoría de los navegadores modernos.
Peter DeWeese
Es posible que desee considerar encadenar .prop("tabindex", "-1");después de laaddClass
Oleg Grishko
19

Puede eliminar el clic para el enlace siguiendo;

$('#link-id').unbind('click');

Puede volver a habilitar el enlace siguiendo estos pasos,

$('#link-id').bind('click');

No puede usar la propiedad 'deshabilitada' para los enlaces.

Kailas Mane
fuente
1
Fácil de activar y desactivar en comparación con otros.
python1981
2
"No se puede usar la propiedad 'deshabilitada' para los enlaces". Me pregunto por qué no hay coherencia entre un botón y un enlace para deshabilitar. "desactivado" también debería funcionar para un enlace. Es como decir que para un automóvil Chevy debe pisar el pedal del freno para detenerse, pero para este otro fabricante de automóviles, debe usar esta palanca ubicada en el techo.
eaglei22
14

Si sigue la ruta href, puede guardarla

Deshabilitar:

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

Luego vuelva a habilitar usando:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

En un caso, tuve que hacerlo de esta manera porque los eventos de clic ya estaban vinculados en otro lugar y no tenía control sobre ello.

jBelanger
fuente
12

Siempre uso esto en jQuery para deshabilitar enlaces

$("form a").attr("disabled", "disabled");
matox
fuente
También puede usar $("form a").attr("disabled", false);para habilitarlo nuevamente
Alexander Ryhlitsky
9

ejemplo de enlace html:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

usa esto en jQuery

    $('#BT_Download').attr('disabled',true);

agregue esto a css:

    a[disabled="disabled"] {
        pointer-events: none;
    }
Ch'nycos
fuente
1
Nunca me había encontrado con esta propiedad CSS antes, pero este es, para mí, el método más simple para deshabilitar un hipervínculo. Lo bueno de esto es que cuando eliminas la clase que contiene la pointer-events: nonepropiedad de los elementos de anclaje, vuelven a hacer lo que hicieron previamente al hacer clic. Por lo tanto, si se tratara de hipervínculos básicos, volverían a navegar a la URL en su hrefatributo, y si tienen un controlador de eventos de clic establecido, se volverá a activar. Mucho más simple que guardar hrefvalores y controladores de clics.
Philip Stratford el
Me gusta esta solución, es la más simple.
louis
De un puñado de "soluciones" cuando nada funcionó (y casi renunciando a esta ruta), llegó a esta joya . Es una solución sin complicaciones. Y el único que REALMENTE FUNCIONA. Prestigio.
user12379095
5

Mi favorito en "finalizar la compra para editar un elemento y evitar los clics en el salvaje oeste salvaje a cualquier lugar" mientras está en la finalización de la compra

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

Entonces, si deseo que todos los enlaces externos en una segunda barra de herramientas de acción se desactiven en el "modo de edición" como se describió anteriormente, agregaré la función de edición

$('#actionToolbar .external').attr('disabled', true);

Ejemplo de enlace después del fuego:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

Y ahora PUEDES usar propiedades deshabilitadas para enlaces

¡Salud!

Lahmizzar
fuente
3

Deberías encontrar tu respuesta aquí .

Gracias @Will y @Matt por esta elegante solución.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});
calor
fuente
3

solo puedes ocultar y mostrar el enlace como quieras

$(link).hide();
$(link).show();
David Fawzy
fuente
2

Solo dispara cosas, establece alguna bandera, devuelve falso. Si la bandera está activada, no haga nada.

Michał Chaniewski
fuente
Lo he intentado configurando una clase, luego llamando a esa clase más tarde, pero devolvemos falsos traslados y evita que se llame al enlace.
davebowker
1

unbind()fue desaprobado jQuery 3, utilice el off()método en su lugar:

$("a").off("click");
shintaroid
fuente
0

Sé que esto no es con jQuery, pero puede deshabilitar un enlace con algunos css simples:

a[disabled] {
  z-index: -1;
}

el HTML se vería así

<a disabled="disabled" href="/start">Take Survey</a>
Cruz Nunez
fuente
0

Esto funciona para enlaces que tienen el atributo onclick establecido en línea. Esto también le permite eliminar más tarde el "return false" para habilitarlo.

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });
mga911
fuente
-2

Solo úsalo $("a").prop("disabled", true);. Esto realmente deshabilitará el elemento de enlace. Necesita ser prop("disabled", true). No usarattr("disabled", true)

André Amaral
fuente