Como você torna um link de âncora não clicável ou desabilitado?

Tenho um link de âncora que desejo desativar assim que o usuário clicar nele. Ou remova a marca âncora de todo o texto, mas definitivamente mantenha o texto.

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

Posso fazer isso facilmente com um botão adicionando .attr("disabled", "disabled");
Eu adicionei com sucesso a propriedade disabled, mas o link ainda era clicável.
Eu realmente não me importo se o texto está sublinhado ou não.

Qualquer pista?

Quando você clica no músico errado, ele deve apenas adicionar "Errado" e então se tornar impossível de clicar.
Quando você clica e acerta, deve adicionar "Awesome" e, em seguida, desativar todas as <a>tags.

Acabei de perceber o que você estava pedindo (espero). Aqui está uma solução feia

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

O método mais limpo seria adicionar uma classe com eventos de ponteiro: nenhum quando você deseja desabilitar um clique. Funcionaria como um rótulo normal.

.disableClick{
    pointer-events: none;
}

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

Use o estilo CSS de eventos de ponteiro . (como sugeriu Jason MacDonald)

Consulte MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . É compatível com a maioria dos navegadores.

A simples adição do atributo "disabled" à âncora fará o trabalho se você tiver uma regra CSS global como a seguinte:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

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

ou

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

Depende da situação

O bootstrap nos fornece .disabledclasse. Por favor, use.

Mas a .disabledclasse só funciona quando a tag 'a' já tem a classe 'btn'. Não funciona em nenhuma tag 'a' antiga. A btnclasse pode não ser apropriada em algum contexto, pois tem conotações de estilo. Nos bastidores, a .disabledclasse define pointer-eventscomo none, para que você possa fazer o CSS fazer o mesmo que Saroj Aryal e Vitrilo sugeriram. (Obrigado, Les Nightingill por este conselho).

Adicione uma cssclasse:

.disable_a_href{
    pointer-events: none;
}

Adicione isto jquery:

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

Apenas remova o hrefatributo da tag âncora.

A melhor maneira é evitar a ação padrão. No caso da tag âncora, o comportamento padrão é redirecionar para o hrefendereço especificado.

Portanto, seguir o javascript funciona melhor na situação:

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

Você pode usar o evento onclick para desativar a ação de clique:

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

Ou você pode simplesmente usar algo diferente de uma <a>tag.

Os comentários de Jason MacDonald funcionaram para mim, testados no Chrome, Mozila e IE.

Adicionada cor cinza para mostrar o efeito de desabilitação.

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

Jquery estava selecionando apenas o primeiro elemento na lista de âncoras, adicionado metacaractere (*) para selecionar e desativar todos os elementos com id #ThisLink.

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

Escreva uma única linha de código jQuery

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

se você quiser escrever no arquivo css

.hyperlink{
    pointer-events: none;
}

Crie a seguinte classe na folha de estilo:

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

Adicione esta classe ao seu link dinamicamente como segue.

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

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

Experimente isto:

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

Simplesmente no SASS:

.some_class{
     // styles...

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

Este é o método que usei para desativar. Espero que ajude.

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

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

Esta seria outra maneira de fazer isso, o manipulador com return false, que desabilitará o link, será adicionado após um clique.

O jeito mais facil

Em seu html:

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

Em seu js:

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

Se você usar como atributo funciona perfeitamente