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

can you reproduce it in stacksnippet or http://jsfiddle.net? — Pranav C Balan, Jan 17 '17 at 09:50
Try to return false at the end of the callback and check it again in case you are submitting form with normal post back. you can also try e.preventDefault() and check if it works. — K D, Jan 17 '17 at 09:54
seems to be working fine. You need to provide a minimal working example of your issue, and document what your expected behaviour is — seemly, Jan 17 '17 at 09:54
don't try to disable the link.. try to update the href of that.. $(this).attr("href","javascript:void(0);"); — K D, Jan 17 '17 at 10:07

score 7 · Accepted Answer · edited Oct 12 '17 at 05:08

7

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
});

edited Oct 12 '17 at 05:08

Nisse Engström

4,738
23
27
42

answered Jan 17 '17 at 10:08

K D

5,889
1
23
35

1

The .off("click") is working perfectly fine but when I am trying to use .on("click") to enable the anchor it is not working. – Aniket Tiwari Nov 19 '18 at 06:54

Rajbir Sharma · Answer 2 · 2017-01-17T10:20:13.947

1

You only need to stop defaultevent from links.

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

edited Jan 17 '17 at 10:20

answered Jan 17 '17 at 10:09

Rajbir Sharma

111
6

score 1 · Answer 3 · edited Oct 12 '17 at 05:08

1

This works for me:

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

edited Oct 12 '17 at 05:08

Nisse Engström

4,738
23
27
42

answered Oct 12 '17 at 04:57

Jeffry Diaz

11
1
4

worked in chrome, and all answers, including the accepted one, either does not work, or does not suit my need (and hence not tested) – xrfang May 03 '20 at 08:30

score 1 · Answer 4 · edited Jun 10 '22 at 12:36

1

In my case I used the following:

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

edited Jun 10 '22 at 12:36

Lee Taylor

7,761
16
33
49

answered Jun 09 '22 at 02:57

PABLO CESAR VEGA VALVERDE

11
2

score 0 · Answer 5 · answered Jan 17 '17 at 09:55

0

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>

answered Jan 17 '17 at 09:55

Charly berthet

1,178
5
15
31

1

Sorry, the element is an not a button, it was styled as a button so I fooled myself... – Matt Welander Jan 17 '17 at 10:01

score 0 · Answer 6 · answered Jan 17 '17 at 09:56

0

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

answered Jan 17 '17 at 09:56

Yusril Maulidan Raji

1,682
1
21
46

I know, but I want an arbitrary function for all .btn – Matt Welander Jan 17 '17 at 10:00
@MattWelander `when one of them is clicked, I want that particular button to be disabled.` From that sentence I thought only one specified button that should be disabled. So, if the case is all the buttons should be disabled, then your code works fine already. – Yusril Maulidan Raji Jan 17 '17 at 10:06
No all buttons shouldn't be, only the clicked one, but when I write the code I don't know which button will get clicked so the code must be abstract in that sense – Matt Welander Jan 26 '17 at 20:25

score 0 · Answer 7 · edited May 23 '17 at 12:24

0

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

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

edited May 23 '17 at 12:24

Community

1
1

answered Jan 17 '17 at 09:59

sandrooco

8,016
9
48
86

score 0 · Answer 8 · answered Jan 17 '17 at 10:05

0

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

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

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

        });

answered Jan 17 '17 at 10:05

Matt Welander

8,234
24
88
138

this should work fine but you can use `data('disabled', true)` instead of `prop('disabled', true)` to make sure it works across browser – mylee Jan 17 '17 at 10:16
btw the disabled did not work is mainly because as you have mentioned you are using hyperlink element instead of button element which do not have a property named "disabled" – mylee Jan 17 '17 at 10:18
Based on here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a , `` doesn't have disabled property. However, I think you can trick it by removing the href attribute and change the css instead. – Yusril Maulidan Raji Jan 17 '17 at 12:49

score 0 · Answer 9 · answered Jan 17 '17 at 11:15

$(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.

score 0 · Answer 10 · edited Jan 17 '17 at 14:19

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);
});

disable a link after click using jQuery

10 Answers10

Linked