Como habilitar ou desabilitar uma âncora usando o jQuery?

Como habilitar ou desabilitar uma âncora usando o jQuery?

Para impedir que uma âncora siga o especificado href, sugiro usar preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Vejo:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Veja também esta pergunta anterior no SO:

jQuery desativar um link

O aplicativo no qual estou trabalhando atualmente faz isso com um estilo CSS em combinação com javascript.

a.disabled { color:gray; }

Sempre que eu quiser desativar um link, eu chamo

$('thelink').addClass('disabled');

Em seguida, no manipulador de cliques para 'thelink' uma tag, sempre executo uma verificação

if ($('thelink').hasClass('disabled')) return;

Encontrei uma resposta que gosto muito melhor aqui

Se parece com isso:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

A ativação envolveria a configuração do atributo href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Isso dá a aparência de que o elemento âncora se torna texto normal e vice-versa.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Acho que uma solução melhor é definir o atributo de dados desativados e ancorar uma verificação no clique. Dessa forma, podemos desativar temporariamente uma âncora até que, por exemplo, o javascript termine com uma chamada ajax ou alguns cálculos. Se não desativá-lo, podemos clicar rapidamente algumas vezes, o que é indesejável ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Fiz um exemplo do jsfiddle: http://jsfiddle.net/wgZ59/76/

A resposta selecionada não é boa.

Use o estilo CSS de ponteiro-evento . (Como Rashad Annara sugeriu)

Consulte MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . É suportado na maioria dos navegadores.

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

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

Experimente as linhas abaixo

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Porque mesmo se você desabilitar a <a>tag hreffuncionará, é necessário remover hreftambém.

Quando você deseja ativar, tente abaixo das linhas

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

É tão simples quanto retornar falso;

ex.

jQuery("li a:eq(0)").click(function(){
   return false;
})

ou

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

No arquivo css

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

$("a").click(function(event) {
  event.preventDefault();
});

Se esse método for chamado, a ação padrão do evento não será acionada.

Se você está tentando bloquear toda a interação com a página, consulte o plug-in jQuery BlockUI

Você nunca especificou realmente como os queria desativados ou o que causaria a desativação.

Primeiro, você deseja descobrir como definir o valor como desativado, para isso, você usaria as Funções de Atributo do JQuery e fará com que essa função ocorra em um evento , como um clique ou o carregamento do documento.

Para situações em que você deve colocar conteúdo de texto ou html em uma tag de âncora, mas simplesmente não deseja que nenhuma ação seja tomada quando esse elemento é clicado (como quando você deseja que um link de paginador esteja no estado desativado porque é a página atual), basta cortar o href. ;)

<a>3 (current page, I'm totally disabled!)</a>

A resposta de @ michael-meadows me deu uma dica disso, mas ele ainda estava abordando cenários em que você ainda precisa / está trabalhando com jQuery / JS. Nesse caso, se você tiver controle sobre como escrever o próprio html, basta x-ing a tag href, basta fazer isso; portanto, a solução é HTML pura!

Outras soluções sem a finagling do jQuery que mantêm o href exigem que você coloque um # no href, mas isso faz com que a página salte para o topo e você deseja que ela fique desabilitada. Ou deixá-lo vazio, mas, dependendo do navegador, isso ainda funciona como pular para o topo e é HTML inválido de acordo com os IDEs. Mas, aparentemente, uma atag é um HTML totalmente válido sem um HREF.

Por fim, você pode dizer: Ok, por que não simplesmente despejar a tag a? Como muitas vezes você não pode, a atag é usada para fins de estilo na estrutura CSS ou controle que você está usando, como o paginador do Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Então, com uma combinação das respostas acima, eu vim com isso.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

Se você não precisa se comportar como uma marca de âncora, eu preferiria substituí-lo. Por exemplo, se sua tag âncora é como

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

usando jquery, você poderá fazer isso quando precisar exibir texto em vez de um link.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

Dessa forma, podemos simplesmente substituir a marca âncora por uma marca div. Isso é muito mais fácil (apenas 2 linhas) e semanticamente correto também (porque não precisamos de um link agora, portanto, não devemos ter um link)

Desativar ou ativar qualquer elemento com a propriedade desativada.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );