¿Cómo se hace que un enlace de anclaje no se pueda cliquear o deshabilitar?

Tengo un enlace de anclaje que quiero deshabilitar una vez que el usuario hace clic en él. O bien, elimine la etiqueta delimitadora de todo el texto, pero definitivamente conserve el texto.

some text 

Puedo hacer esto fácilmente con un botón agregando .attr("disabled", "disabled");
Agregué la propiedad deshabilitada con éxito, pero aún se puede hacer clic en el enlace.
Realmente no me importa si el texto está subrayado o no.

¿Cualquier pista?

Cuando haces clic en el músico incorrecto, solo debe agregar “Incorrecto” y luego dejar de ser cliqueable.
Cuando haces clic y estás en lo correcto, debe agregar “Impresionante” y luego desactivar todas las tags .

Me acabo de dar cuenta de lo que estabas pidiendo (espero). Aquí hay una solución fea

 var preventClick = false; $('#ThisLink').click(function(e) { $(this) .css('cursor', 'default') .css('text-decoration', 'none') if (!preventClick) { $(this).html($(this).html() + ' lalala'); } preventClick = true; return false; }); 

El método más limpio sería agregar una clase con eventos de puntero: ninguno cuando desee desactivar un clic. Funcionaría como una etiqueta normal.

 .disableClick{ pointer-events: none; } 

La respuesta seleccionada no es buena.

Usar estilo CSS de eventos de puntero . (como Jason MacDonald sugirió)

Ver MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Es compatible con la mayoría de los navegadores.

El simple agregado de un atributo “deshabilitado” al ancla hará el trabajo si tienes una regla de CSS global como la siguiente:

 a[disabled], a[disabled]:hover { pointer-events: none; color: #e1e1e1; } 
 $('a').removeAttr('href') 

o

 $('a').click(function(){ return false}) 

Depende de la situación

Agrega una clase css :

 .disable_a_href{ pointer-events: none; } 

Agrega este jquery :

 $("#ThisLink").addClass("disable_a_href"); 

Bootstrap nos proporciona la clase .disabled . Por favor úsala

Pero la clase .disabled solo funciona cuando la etiqueta ‘a’ ya tiene la clase ‘btn’. No funciona con ninguna etiqueta ‘a’ anterior. La clase ‘btn’ puede no ser apropiada en algún contexto ya que tiene connotaciones de estilo. Bajo las carátulas, la clase .disabled establece pointer-events en none, por lo que puede hacer que css haga lo mismo que Saroj Aryal y Vitrilo han sugerido. (Gracias, Les Nightingill por este consejo).

La mejor manera es evitar la acción predeterminada. En el caso de la etiqueta de anclaje, el comportamiento predeterminado es redirigir a la dirección especificada href .

Entonces, seguir javascript funciona mejor en la situación:

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

Escribe esto una sola línea de código jQuery

 $('.hyperlink').css('pointer-events','none'); 

si quieres escribir en el archivo css

 .hyperlink{ pointer-events: none; } 

Puede usar el evento onclick para deshabilitar la acción de hacer clic:

 some text 

O puede usar algo que no sea una etiqueta .

Simplemente elimine el atributo href de la etiqueta de anclaje.

Crear la siguiente clase en la hoja de estilos:

  .ThisLink{ pointer-events: none; cursor: default; } 

Agregue esta clase a su enlace dinámicamente de la siguiente manera.

  some text // or using jquery  

Los comentarios de Jason MacDonald funcionaron para mí, probados en Chrome, Mozila e IE.

Se agregó color gris para mostrar el efecto de desactivación.

 .disable_a_href{ pointer-events: none; **color:#c0c0c0 !important;** } 

Jquery estaba seleccionando solo el primer elemento en la lista de anclaje, agregó el carácter meta (*) para seleccionar y deshabilitar todo elemento con id #ThisLink .

 $("#ThisLink*").addClass("disable_a_href"); 

Prueba esto:

 $('a').contents().unwrap(); 

Simplemente en SASS:

 .some_class{ // styles... &.active { pointer-events:none; } } 

Este es el método que solía desactivar. Espero que ayude.

 $("#ThisLink").attr("href","javascript:void(0)"); 
 $('#ThisLink').one('click',function(){ $(this).bind('click',function(){ return false; }); }); 

Esta sería otra forma de hacerlo, el controlador con return false , que deshabilitará el enlace, se agregará después de un clic.

La forma más fácil

En tu html:

 xxxxx 

En tu js:

 $('#foo').attr("disabled", false); 

Si lo usa como atributo funciona a la perfección