jQuery desativar um link

284

Alguém sabe como desativar um link no jquery SEM usar return false;?

Especificamente, o que estou tentando fazer é desativar o link de um item, executando um clique nele usando o jquery, que aciona algumas coisas, e reativando esse link para que, se ele for clicado novamente, funcione como padrão.

Obrigado. Dave

ATUALIZAÇÃO Aqui está o código. O que é necessário fazer após a aplicação da .expandedclasse é reativar o link desativado.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});
davebowker
fonte
7
Por que o requisito de não usar return false? Use-o e exclua o manipulador de eventos quando ele não se aplicar mais (ou coloque um condicional nele para retornar valores diferentes, dependendo do status das "algumas coisas" mencionadas).
Quentin
Você está apenas tentando fazer um pré-processamento antes que o link seja seguido na mesma ação de clique? ou seja, você não está propondo dois cliques, mas o usuário clica no link, algumas ações acontecem, o link é seguido?
Lázaro
Caso contrário, você pode explicar por que está adotando essa abordagem, pois uma melhor compreensão do espaço do problema melhorará as respostas.
Lázaro
@ Lázaro, estou propondo 2 cliques no mesmo link. 1 para fazer algumas coisas primeiro, depois a 2ª para tratar o link como um link.
Davebowker
@daviddorward, Até agora, tentei retornar falso e ele continua até a segunda parte do meu objetivo, ou seja, não permite que o segundo clique passe. Se você pudesse escrever um pequeno exemplo, ficaria muito grato.
Davebowker

Respostas:

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

Isso impedirá o comportamento padrão de um hiperlink, que é visitar o href especificado.

No tutorial do jQuery :

Para cliques e a maioria dos outros eventos, você pode impedir o comportamento padrão - aqui, seguindo o link para jquery.com - chamando event.preventDefault () no manipulador de eventos

Se você desejar preventDefault()apenas se uma determinada condição for atendida (algo está oculto, por exemplo), você poderá testar a visibilidade da sua ul com a classe expandida . Se estiver visível (ou seja, não oculto), o link deverá disparar normalmente, pois a instrução if não será inserida e, portanto, o comportamento padrão não será impedido:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});
karim79
fonte
3
Com o jQuery 1.7+, você pode ativar / desativar: stackoverflow.com/questions/209029/…
Lance Cleveland
se tiver um href e onclick, isso funcionará $ ("# myLink"). attr ('onclick', '') .click (function (e) {e.preventDefault ();});
Ronald McDonald
realizado através do ajax e jquery, posso ocultar uma compra href com o retorno de chamada para impedir que os raspadores obtenham esses links. Awesome thanks!
Cesar Bielich 07/07/2015
este post tem a maneira mais fácil de usar o bootstrap , a esperança ajuda.
shaijut
107

Tente o seguinte:

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

EDITAR-

No seu código atualizado:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);
TStamper
fonte
3
Jogar com href é muito bom, porque é uma maneira rápida de desabilitar um link que executa ações por meio de um evento onclick. Muito, muito inteligente!
Daitangio
método doce para impedir que o navegador adicione o # dentro do URI ao fazer issohref="#"
Abela
65

Para outros que vieram aqui pelo google como eu - aqui está outra abordagem:

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

Lembre-se: não é apenas uma classe css

class = "buttonstyle"

mas também esses dois

class = "buttonstyle desativado"

para que você possa adicionar e remover facilmente outras classes com o jQuery. Não há necessidade de tocar href ...

Eu amo jQuery! ;-)

Hein
fonte
2
isso pressupõe que o link não tem destino :) #
1100 dstarh
2
Em vez de fazer toda essa fantasia, por que não usar o onclick mais alto no dom, use on()para filtrar todos os a.disabledlinks e impedir o padrão. Tudo o que você precisa fazer é ativar / desativar a classe desativada e o link se autodefinirá quando "ativado".
CodeChimp 27/02
Não há necessidade de "== true" - addClass ('disabled') será executado independentemente. if(disabledCondition)
Fox Wilson
1
@fwilson, enquanto você estiver totalmente correto, para um programador iniciante, é mais fácil entender com o == true. :)
carmenism
Alguma razão específica para não simplificá-lo if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Mir
58

Aqui está uma solução alternativa de css / jQuery que eu prefiro por sua dispersão e scripts minimizados:

css:

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

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});
Peter DeWeese
fonte
7
Da Mozilla : "Aviso: o uso de eventos de ponteiro no CSS para elementos não-SVG é experimental. O recurso costumava fazer parte da especificação de rascunho da interface do usuário do CSS3, mas, devido a muitos problemas em aberto, foi adiado para o CSS4."
marcadores duelin
1
Essa é uma boa consideração, mas funciona bem na maioria dos navegadores modernos.
Peter DeWeese
Você pode querer considerar encadeamento .prop("tabindex", "-1");após oaddClass
Oleg Grishko
19

Você pode remover o clique do link seguindo;

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

Você pode reativar o link seguindo:

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

Você não pode usar a propriedade 'desativada' para links.

Kailas Mane
fonte
1
Fácil de ligar e desligar em comparação com outros.
python1981
2
"Você não pode usar a propriedade 'desativada' para os links." Gostaria de saber por que não há consistência entre um botão e um link para desativar. "disabled" também deve funcionar para um link. É como dizer para um carro Chevy que você deve pressionar o pedal do freio para parar, mas para esse outro fabricante de carros, você deve usar essa alavanca localizada no teto.
eaglei22
14

Se você seguir a rota href, poderá salvá-la

Desabilitar:

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

Em seguida, reative usando:

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

Em um caso, eu tive que fazer dessa maneira, porque os eventos de clique já estavam vinculados a outro lugar e eu não tinha controle sobre ele.

jBelanger
fonte
12

Eu sempre uso isso no jQuery para desativar links

$("form a").attr("disabled", "disabled");
matox
fonte
Você também pode usar $("form a").attr("disabled", false);para
ativá
9

Exemplo de link 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>

use isso no jQuery

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

adicione isso ao css:

    a[disabled="disabled"] {
        pointer-events: none;
    }
Ch'nycos
fonte
1
Eu nunca me deparei com essa propriedade CSS antes, mas este, para mim, é de longe o método mais simples para desativar um hiperlink. A vantagem disso é que, quando você remove a classe que contém a pointer-events: nonepropriedade dos elementos âncora, eles voltam a fazer o que fizeram anteriormente quando clicados. Portanto, se fossem hiperlinks básicos, eles reverterão para a navegação no URL em seu hrefatributo e, se tiverem um manipulador de eventos de clique definido, ele se tornará ativo novamente. Muito mais simples do que salvar hrefvalores e manipular cliques.
Philip Stratford
Eu gosto desta solução, é a mais simples.
22619 louis
De um punhado de "soluções" quando nada funcionou (e quase desistiu dessa rota), chegou a essa jóia . É uma solução sem complicações. E o único que REALMENTE FUNCIONA. Parabéns.
user12379095
5

Meu favorito no "checkout para editar um item e impedir que o oeste selvagem faça cliques em qualquer lugar - enquanto estiver no checkout"

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

Portanto, se eu quiser que todos os links externos em uma segunda barra de ferramentas de ação sejam desativados enquanto estiver no "modo de edição", conforme descrito acima, adicionarei a função de edição

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

Exemplo de link após incêndio:

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

E agora você PODE usar a propriedade desativada para links

Felicidades!

Lahmizzar
fonte
3

Você deve encontrar sua resposta aqui .

Obrigado @Will e @Matt por esta solução elegante.

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

você pode apenas ocultar e mostrar o link como quiser

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

Basta acionar coisas, definir alguma bandeira, retornar falso. Se o sinalizador estiver definido - não faça nada.

Michał Chaniewski
fonte
Tentei isso definindo uma classe e depois chamando essa classe mais tarde, mas retornando false, e impede que o link seja chamado.
Davebowker
1

unbind()foi descontinuado jQuery 3, use o off()método:

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

Eu sei que isso não é com jQuery, mas você pode desativar um link com alguns css simples:

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

o HTML ficaria assim

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

Isso funciona para links que possuem o atributo onclick definido inline. Isso também permite remover posteriormente o "retorno falso" para habilitá-lo.

        //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
fonte
-2

Apenas use $("a").prop("disabled", true);. Isso realmente desativará o elemento de link. Precisa ser prop("disabled", true). Não useattr("disabled", true)

André Amaral
fonte