Home / Questions / 101932
Accepted
tripossi
Asked: 2020-09-14 02:15:57 +0800 CST 2020-09-14 02:15:57 +0800 CST

disable a link

  • 772

I want to disable this link for a few seconds.

<a href="#" data-role="button" data-theme="f" data-rel="popup" id="deshabilitar" type="button" data-icon="cloud-upload" data-iconshadow="true" onclick="deshabilitar()"></a>

so that it only allows you to click once. In the function I have this code but it doesn't do it to me and I don't see why. Thanks.

 var button = $('#deshabilitar');
button.attr('disabled', 'disabled');
setTimeout(function() {
     button.removeAttr('disabled');
},3000);

https://jsfiddle.net/u2c6wdgq/1/

javascript

4 Answers

  1. Best Answer

    What you could do is give the binding the property pointer-eventsof csswith value noneby javascriptand a few seconds later remove that property so that it is enabled again.

    Here is an example:

    This would be the HTML:

    <a href="#" onclick="deshabilitar(this)">Dame click</a>

    And this is him javascript:

    function deshabilitar( link ){
    link.style.pointerEvents = 'none';
    link.style.color = '#bbb';

    setTimeout(function(){
        link.style.pointerEvents = null;
        link.style.color = 'blue';
    }, 3000);
}

    I've tried it and it works, I hope it works for you.

    • 2

  2. Maybe you didn't have the reference right, try with:

    function deshabilitar() {
    $(this).attr('disabled', 'disabled');
    setTimeout(function() {
        $(this).removeAttr('disabled');
    }, 3000);
}
    • 1

  3. I think the problem is that you can't add the attribute disabledto a link. In this link (in English) you have information on the best way to disable it

    • 1

  4. A link is not a form control so you can disable it to avoid the default behavior.

    Try adding a state of enabled/disabled to the link and depending on the state of the link, you do the corresponding action.

    Here an example:

    $('#deshabilitar').click(function(){
   var $this = $(this)
   
   if($this.hasClass('inhabilitado')) {
     alert("link unhabilitado");
   }
   
    $this.addClass('inhabilitado');
    setTimeout(function() {
        $this.removeClass('inhabilitado');
        alert("link habilitado")
    }, 3000);
});
    .inhabilitado{
  color:#ccc;
  cursor:default;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-role="button" data-theme="f" data-rel="popup" id="deshabilitar" type="button" data-iconshadow="true">link</a>

    What it does is simple, add a class called deshabilitadowhen element is clicked. This class changes the color and the cursor to give the impression that it is disabled. Then after the elapsed time the styles are eliminated and the link is enabled again.

    • 1