disable a link after click using jQuery

Question

I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:

$('.btn').on('click', function(e) {
    $(this).prop('disabled',true);
});

There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...

Apparently, my $this isn't pointing to the correct object, or something =)

----------- UPDATE ---------------

SORRY, update above. The element I have is not a button, it is a link styled as a button...

Answer 1

Don't try to disable the Anchor tag. Try to set the href instead.

$('.btn').on('click', function(e) {
    e.preventDefault();
    $(this).off("click").attr('href', "javascript: void(0);");
   //add .off() if you don't want to trigger any event associated with this link
});

Answer 2

You only need to stop defaultevent from links.

$('.btn').on('click', function(e) {
    $(this).prop('disabled',true);
    e.preventDefault();
});

Answer 3

这对我有用：

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

Answer 4

It works fine.

 $('.btn').on('click', function(e) { $(this).prop('disabled',true); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class='btn'>But1</button> <button class='btn'>But2</button> </div>

Answer 5

Instead of using this , you can just specify your target by using its id .

 $('.btn').on('click', function(e) { $('#btn2').prop('disabled',true); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="btn1" class="btn">Button</button> <button id="btn2" class="btn">Button</button> <button id="btn3" class="btn">Button</button>

Hope it helps

Answer 6

$('.btn').on('click', function(e) {
    $(this).attr('disabled', true);
});

Check this post: https://stackoverflow.com/a/5876747/5243272

Answer 7

This works (in chrome), but perhaps some drawbacks?

        $('.btn').on('click', function(e) {
            if( $(this).prop('disabled') == true) {
                return false; 
            }

            $(this).prop('disabled',true);

        });

Answer 8

$(document).ready(function() {
  $('.btn').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    alert('I have been clicked!');
    $(this).css('pointer-events', 'none').css('cursor', 'default');
  });
});

This will prevent any other further clicks on that link.

Answer 9

If your Html like this

<a href="https://www.google.co.in/" target="_blank" class="test">This      is another paragraph.</a>

use below code :

$(".test").one("click", function() {
    var clas = $(this).attr("class");
    setTimeout(function() {
        $("." + clas).removeAttr('href');
    }, 100);
});

If your Html like this

<a href="https://www.google.co.in/" target="_blank" class="test"> <button class="btn">This is another paragraph.</button></a>

use below code :

$(".btn").one("click", function() {
    var clas = $(this).parent().attr("class");
    setTimeout(function() {
        $("." + clas).removeAttr('href');
    }, 100);
});

Answer 10

就我而言，我使用了以下内容：

onclick="$(this).css('pointer-events', 'none');"