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

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

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

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


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

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.


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.


12

Eu sempre uso isso no jQuery para desativar links

$("form a").attr("disabled", "disabled");

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

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!


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

3

você pode apenas ocultar e mostrar o link como quiser

$(link).hide();
$(link).show();

2

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


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

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>

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

-2

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

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.