Etiqueta href desativada

Embora esse link esteja desativado, ele ainda pode ser clicado.

<a href="/" disabled="disabled">123n</a>

Posso torná-lo não clicável se estiver desativado? Devo usar JavaScript necessariamente?

Não há atributo desabilitado para hiperlinks. Se você não deseja que algo seja vinculado, será necessário remover <a>completamente a tag ou remover seu hrefatributo.

Com a ajuda do css, você desabilitará o hiperlink. Experimente o abaixo

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

<a href="link.html" class="disabled">Link</a>

Você pode usar:

<a href="/" onclick="return false;">123n</a>

Você pode usar uma destas soluções:

HTML

<a>link</a>

Javascript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

Tente o seguinte:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

A <a>tag não tem um disabledatributo, isso é só para <input>s (e <select>s e <textarea>s).

Para "desativar" um link, você pode remover seu hrefatributo ou adicionar um manipulador de cliques que retorne false.

Você precisa remover a <a>tag para se livrar disso.

ou tente usar: -

  <a href="/" onclick="return false;">123n</a>

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

Dicas 1: Usando CSS pointer-events: none;

Dicas 2: Usando JavaScript javascript:void(0) (esta é uma prática recomendada)

<a href="javascript:void(0)"></a>

Dicas 1: Usando o Jquery $('selector').attr("disabled","disabled");

Somente CSS: isso remove o link do href.

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

Permitir que um pai tenha pointer-events: nonedesabilitará o filho a-tagdessa maneira (requer que a div cubra oa e não tenha 0 largura / altura):

<div class="disabled">
   <a href="/"></a>
</div>

Onde:

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

você pode desativar o link usando javascript em tempo de execução usando este código

$ ('. link da página'). css ("eventos-ponteiro", "nenhum");

Se você quiser se livrar do ponteiro, faça isso com o css usando o cursor .

Você pode emular o atributo desativado em uma <a>tag.

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

No meu caso, eu uso

<a href="/" onClick={e => e.preventDefault()}>

Eu tenho um:

<a href="#">This is a disabled tag.</a>

Espero que ajude você;)

Não podemos desativá-lo diretamente, mas podemos fazer o seguinte

1. adicionar type="button".
2. remova o href=""atributo
3. adicione o disabledatributo para mostrar que está desativado alterando o cursor e fica esmaecido.

a seguir é um exemplo

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

Consegui alcançar o resultado desejado usando uma operação ternária ng-href

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

Onde

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

Use botões e links corretamente.

• Os botões ativam a funcionalidade de script em uma página da Web (caixas de diálogo, expandir / recolher regiões).

• Os links levam você para outro local, para uma página diferente ou para um local diferente na mesma página.

Se você seguir essas regras, não haverá cenário em que você precise desativar um link. Mesmo que você faça com que um link pareça visualmente desativado e em branco, clique em

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

Você não considerará a acessibilidade e os leitores de tela o lerão como um link e as pessoas com deficiência visual continuarão se perguntando por que o link não está funcionando.

Se você estiver usando o WordPress, criei um plugin que pode fazer isso e muito mais sem precisar saber como codificar nada. Tudo o que você precisa fazer é adicionar o seletor do (s) link (s) que deseja desativar e, em seguida, escolher "Desativar todos os links com esse seletor em uma nova guia". no menu suspenso exibido e clique em atualizar.

Clique aqui para ver um gif que demonstra isso

Você pode obter a versão gratuita no repositório do WordPress.org Plugin para experimentá-lo.

Aqui estão várias maneiras de desativar a tag a:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

Como não há atributos desativados para a marca âncora. Se você deseja interromper o comportamento da marca âncora dentro de uma função jQuery, pode usar a linha abaixo no início da função:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

Vejo que já há uma tonelada de respostas postadas aqui, mas não acho que ainda exista uma clara que combine as abordagens já mencionadas na que encontrei para trabalhar. Isso faz com que o link pareça desativado e também não redireciona o usuário para outra página.

Esta resposta assume que você está usando jquery e bootstrap e usa outra propriedade para armazenar temporariamente a hrefpropriedade enquanto desativada.

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

Qualquer coisa na tag href será exibida na parte inferior esquerda da janela do navegador quando você passar o mouse sobre ela.

Pessoalmente, acho que ter algo como javascript: void (0) exibido para o usuário é hediondo.

Em vez disso, deixe o href desativado, faça sua mágica com o jQuery / qualquer outra coisa e adicione uma regra de estilo (se você ainda precisar parecer um link):

a {
    cursor:pointer;
}

A melhor resposta é sempre a mais simples. Não há necessidade de qualquer codificação.

Se a tag (a) anchor não tiver atributo href, será apenas um espaço reservado para um hiperlink. Suportado por todos os navegadores!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

Você pode desativar as tags de âncora retornando false. No meu caso, estou usando angular e ng-disabled para um acordeão Jquery e preciso desativar as seções.

Então, eu criei um pequeno trecho de js para corrigir isso.

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

se você quiser apenas desativar temporariamente o link, mas deixar o href lá para ativar mais tarde (que é o que eu queria fazer), descobri que todos os navegadores usam o primeiro href. Daí eu pude fazer:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

Variante que combina comigo:

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

Apenas adicionando: Isso funciona em geral, mas não funcionará se o usuário tiver desativado o javascript no navegador.

1) Opcionalmente, você pode usar a classe Bootstrap 3 em sua tag anchor para desativar a tag href, depois de integrar o plugin bootstrap 3

<a href="/" class="btn btn-primary disabled">123n</a>

Ou

2) Aprenda a habilitar o javascript usando html ou js nos navegadores. ou crie um pop-up informando ao usuário para ativar o javascript antes de usar o site