Disable html element with jquery

Question

I have this code, where I would like to disable it when performing a function, and after finishing, enable it.

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

I’ve tried to:

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

But no one disables.

Answer 1

There is no way to leave a link disabled, for disabled is not an HTML attribute you can use in a tag <a>

If this is your intention use a tag <button> or <input type="button" value=""> in place of tag <a>

If you choose to use the button would look like this for example

$("#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>

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

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

Answer 2

The attribute href does not apply to the item th. He should be in the element a:

<a href="#"...

The properties readonly and disabled are for form elements (input, textarea, select etc.). You can "disable" the link by changing the CSS property pointer-events for none and then "rehabilitate" returning the value to auto.

Take an example:

$("#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>

Answer 3

You can do this with pure Javascript very easily even with the same structure HTML that you have. You can see in the example that when you execute the tag a will not have the attribute onclick, but when 5 seconds setTimeout() time passes the tag will contain the attribute and the function can be executed:

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>

Answer 4

To disable the element and no longer allow it to be clicked, can use CSS Class Pointer-Events: None;

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

or if you only want by jquery you can do so:

$('a').css('pointer-events', 'none');