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


89

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.


remova a parte href e adicione ao seu CSS: "cursor: ponteiro", presumo que você tenha um $ ('# ThisLink'). click ou algo parecido?
Livro de Zeus

1
$ ("# ThisLink"). Parent (). Find ("a"). Remove ();
Adam Holmes,

Adam, essa solução quase funciona. Ele remove todo o texto dentro da tag a.
Evik James

Possível duplicata de Como desativar links HTML
Steve Chambers,

Respostas:


12

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

Isso poderia realmente resolver o problema, mais ou menos ... Em vez de .click, use .on no corpo e delegue para 'a [desativado]'. Em seguida, coloque o código css no css real usando o mesmo seletor. Então, prevenir o clique é tão simples quanto event.preventDefault () e return false
lassombra

2
Discordo, use CSS "ponteiro-eventos: nenhum;" em vez disso, assim como em outras respostas.
vitrilo

200

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

19
Usando essa ideia, uma maneira ainda mais fácil seria usar um seletor [desativado] para o css para que você não precisasse adicionar a classe .disableClick à âncora
Ferran Salguero

15
Porém, tenha cuidado, pois você ainda pode acessar as opções desativadas com eventos de ponteiro: nenhum
Mike Mellor

esta solução é boa para mim em navegadores modernos. Eu tenho tags âncora utilizáveis ​​que são obrigadas a clicar em eventos e, para desencorajar o envio de spam, enquanto seus processos fazem o seu trabalho, eu as adiciono programaticamente e removo-as quando o processo estiver concluído. Tabular para uma marca de âncora desativada no meu caso também não é uma preocupação, mas pode ser para outros. YMMV
Stephen Tetreault

2
O uso pointer-events:nonetambém desativa o cursortexto do título e outros eventos de mouseover.
Keith

o valor none instrui o evento do mouse a "passar" pelo elemento e direcionar o que quer que esteja "abaixo" desse elemento. developer.mozilla.org/en-US/docs/Web/CSS/pointer-events Isso pode ser um problema em alguns layouts
user2988142

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

8
Explique sua solução para que os futuros visitantes desta questão entendam como ela resolve o problema em questão.
War10ck

3
De: MDN: The void Operator . Quando um navegador segue um javascript: URI, ele avalia o código no URI e substitui o conteúdo da página pelo valor retornado, a menos que o valor retornado seja undefined. O voidoperador pode ser usado para retornar undefined. Por exemplo: <a href="javascript:void(0);"> Click here to do nothing </a> observe, entretanto, que o javascript:pseudo protocolo é desencorajado em relação a outras alternativas, como manipuladores de eventos discretos.
Lenin

28

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

3
+1 para adicionar o estilo por meio do atributo [desativado] em vez de uma classe. Deve-se notar que os eventos de ponteiro: nenhum; não funciona em nada mais antigo que o IE11.
Daniel Tonon

Todos os IEs têm sua própria lógica proprietária de desabilitar âncoras, botões e até outros elementos por padrão. Esta solução alternativa necessária para navegadores não-IE.
vitrilo de

3
+1. Só assim eu não tem que procurá-lo novamente na próxima vez: javascript necessário (usando jQuery) seria $("#elementid").attr("disabled", "disabled");. Também pode ser útil incluir cursor: defaultno CSS (conforme sugerido por Muhammad Nasir).
ASL

Um elemento não tem um atributo desativado , usá-lo como um seletor pode ou não funcionar.
RobG

1
Intuitivo - boa solução. Fiquei realmente surpreso ao descobrir que os <a />elementos não têm um atributo desativado - parece estranho.
Morvael


10

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).


3
a classe .disabled funciona apenas quando a tag 'a' já tem a classe 'btn'. Não funciona em nenhuma tag 'a' antiga. A classe 'btn' pode não ser apropriada em algum contexto, pois tem conotações de estilo. Nos bastidores, a classe .disabled define os eventos de ponteiro para nenhum, então você pode fazer css para fazer a mesma coisa que Saroj Aryal e Vitrilo sugeriram.
Les Nightingill

Obrigado por seu comentário detalhado. Isso esclarece muito para muitos usuários. Posso usar algum texto do seu comentário para estender minha resposta?
Yevgeniy Afanasyev

9

Adicione uma cssclasse:

.disable_a_href{
    pointer-events: none;
}

Adicione isto jquery:

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


5

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

4

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.


Você pode combinar isso com text-decoration: nonee .disabledLink { color: #000 !important; }para fazer com que pareça um texto normal.
Polinômio de

1
JavaScript invasivo é uma solução terrível.
jahrichie

4

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

4

Escreva uma única linha de código jQuery

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

se você quiser escrever no arquivo css

.hyperlink{
    pointer-events: none;
}

3

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>

Como isso é diferente da resposta de Jason MacDonald ?
Todos os trabalhadores são essenciais de

1

Experimente isto:

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

qual é a âncora mantém regras de estilo que são essenciais para seu programa, esta é uma correção que desconsidera css
Trevor Rudolph

1

Simplesmente no SASS:

.some_class{
     // styles...

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

Embora este código possa responder à pergunta, fornecer contexto adicional sobre por que e / ou como ele responde à pergunta aumentaria significativamente seu valor a longo prazo. Por favor edite sua resposta para adicionar alguma explicação.
Toby Speight

1

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

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

1
Esta é a solução simples e fácil e deve ser aceita!
Si8

-1
$('#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.


-4

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


3
desativado não é um atributo válido para a tag <a>
Josepas 01 de
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.