0

Eu tenho este código, onde gostaria de desabilitá-lo quando for realizar uma função, e após terminar, habilitá-lo.

 <th href="#" style="text-align:right"><a title="Validar Pedido"  id="btnValidar" onclick="Validar();" class="btn btn-info"><i class="fa fa-lg"></i>Validar</a></th>

Já tentei:

$('#btnValidar').prop("readonly", true);
$("#btnValidar").prop("disabled", true);
$("#btnValidar").attr("disabled", true);
$("#btnValidar").attr("disabled", "disabled");

Porém nenhum desabilita.

5 Respostas 5

4

Não tem como deixar um link disabled, pois disabled não é um atributo HTML que você pode usar em uma tag <a>

Se essa é sua intenção use uma tag <button> ou <input type="button" value=""> no lugar da tag <a>

Se optar por usar no button ficaria assim por exemplo

$("#btnValidar").attr("disabled", "disabled");
<th href="#" style="text-align:right"><button title="Validar Pedido"  id="btnValidar" onclick="Validar();" class="btn btn-info"><i class="fa fa-lg"></i>disabled</button></th>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

4
  • Tem ai um erro, onde anda a função validar();?
    – Jorge B.
    Commented 31/10/2019 às 17:03
  • @JorgeB. nesse caso nem faz diferença, se ela não colocou a função na pergunta acho que não faria diferença para ela, ai foi da minha interpretação da pergunta mesmo... Ao meu entender o problema era apena pq a função dela não estava conseguindo colocar p disabled no <a>, e a resposta é que o <a> não pode receber esse atributo, pois não é um atributo global desse tipo de tag... :)
    – hugocsl
    Commented 31/10/2019 às 17:29
  • Sim, mas podias pelo menos por isso a funcionar ;)
    – Jorge B.
    Commented 4/11/2019 às 9:13
  • @AugustoVasques removi a parte do ID duplicado, bem observado ;). Abs
    – hugocsl
    Commented 18/02/2022 às 11:03
1

Pode fazer isto com Javascript puro bem facilmente inclusive com a mesma estrutura HTML que tem. Pode ver no exemplo que quando der o executar a tag a não terá o atributo onclick, mas quando passar o tempo do setTimeout() de 5 segundos a tag conterá o atributo e a função poderá ser executada:

let tag = document.getElementById('btnValidar');
let atr = tag.attributes.removeNamedItem('onclick'); // aqui remove o atributo de onclick

console.log(tag);

setTimeout(() => {
  tag.setAttribute('onclick', 'Validar()');          // aqui insere o atributo e a função
  console.log(tag)
}, 5000)


function Validar() { alert('Agora funcionei !') }
<th style="text-align:right"><a title="Validar Pedido" href="#"   id="btnValidar" onclick="Validar();" class="btn btn-info"><i class="fa fa-lg"></i>Validar</a></th>

1

O atributo href não se aplica ao elemento th. Ele deveria estar no elemento a:

<a href="#"...

As propriedades readonly e disabled são para elementos de formulário (input, textarea, select etc.). Você pode "desabilitar" o link alterando a propriedade CSS pointer-events para none e depois "reabilitar" voltando o valor para auto.

Veja um exemplo:

$("#btnValidar").click(function(e){
   e.preventDefault(); // evita redirecionamento do link
})
.css("pointer-events", "none"); // cancela eventos no link

function Validar(){
   console.log("ok");
}

function f(){
   $("#btnValidar")
   .css("pointer-events", "auto"); // reabilita eventos no link
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" title="Validar Pedido"  id="btnValidar" onclick="Validar();" class="btn btn-info"><i class="fa fa-lg"></i>Validar</a>
<br>
<button onclick="f()">Ativar link</button>

1
  • Isso não impede de acionar o elemento, ele não pode ser clicado, mais ainda pode ser selecionado e acionado pelo teclado. Commented 17/02/2022 às 18:18
-1

Para desabilitar o elemento e não permitir mais que seja clicado, pode usar a Classe CSS pointer-events: none;

a {
    opacity : 0.5; /* Só para dar um efeito */
    pointer-events: none;
}

ou se deseja somente por jquery pode fazer assim:

$('a').css('pointer-events', 'none');
1
  • Isso não desabilita o elemento, apenas o impede de se clicado. Ele ainda pode ser selecionado e acionado pelo teclado. Commented 17/02/2022 às 18:26
-2

/*
complementando a resposta do Fabrício
como ele ja disse usando jquery para desativar a funçõos como exemplo clique da
tag a é so usar 
*/
$('a').css("pointer-events", "none"); 

/*para ativar novamente usa-se*/
$('a').css('pointer-events', 'auto');

1
  • Se a sua resposta se baseia-se numa resposta cujo a premissa está errada. Bloquear eventos de ponteiro não impedem o elemento de ser selecionado e acionado pelo teclado. Commented 17/02/2022 às 18:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .