¿Cómo se puede hacer que no se pueda hacer clic en un enlace de anclaje o que esté inhabilitado?

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

<a href='' id='ThisLink'>some text</a>

Puedo hacer esto fácilmente con un botón agregando .attr("disabled", "disabled");
que agregué con éxito la propiedad deshabilitada, pero aún se podía 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 equivocado, debería simplemente agregar "Wrong" y luego no se puede hacer clic.
Cuando hace clic y está en lo correcto, debe agregar "Impresionante" y luego deshabilitar todas las <a>etiquetas.

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

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 deshabilitar un clic. Funcionaría como una etiqueta normal.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

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

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

La simple adición del atributo "deshabilitado" al ancla hará el trabajo si tiene una regla 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

Bootstrap nos da .disabledclase. Por favor utilícelo.

Pero la .disabledclase solo funciona cuando la etiqueta 'a' ya tiene la clase 'btn'. No funciona con ninguna etiqueta "a" antigua. La btnclase puede no ser apropiada en algún contexto ya que tiene connotaciones de estilo. Bajo las sábanas, la .disabledclase se establece pointer-eventsen none, por lo que puede hacer que CSS haga lo mismo que Saroj Aryal y Vitrilo han sugerido. (Gracias, Les Nightingill por este consejo).

Agregar una cssclase:

.disable_a_href{
    pointer-events: none;
}

Agrega esto jquery:

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

Simplemente elimine el hrefatributo de la etiqueta de anclaje.

La mejor forma es evitar la acción predeterminada. En el caso de la etiqueta de ancla, el comportamiento predeterminado es redirigir a la hrefdirección especificada.

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

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

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

<a href='' id='ThisLink' onclick='return false'>some text</a>

O simplemente podría usar algo más que una <a>etiqueta.

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 anclajes, agregó metacarácter (*) para seleccionar y deshabilitar todos los elementos con id #ThisLink.

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

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

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

si quieres escribir en un archivo css

.hyperlink{
    pointer-events: none;
}

Cree la siguiente clase en la hoja de estilo:

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

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

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Prueba esto:

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

Simplemente en SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Este es el método que utilicé para desactivar. Espero que ayude.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

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

La forma mas facil

En tu html:

<a id="foo" disabled="true">xxxxx<a>

En tu js:

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

Si lo usas como atributo funciona perfectamente