JQuery to disable button not working

Question

I have the following button:

<a type="button" class="btn btn-primary disabledButton">Download</a>

I want to disable it using the .prop property of JQuery. Like this:

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

However, it is not working as nothing changed. Any ideas?

If you're looking for a workaround without using a button, what are you trying to do exactly? Like what functionality are you trying to change by disabling the button? — Michael Coker, Apr 03 '17 at 22:20

Nawwar Elnarsh · Answer 1 · 2017-04-04T14:20:33.877

2

Has to be a button not an anchor

<button class="btn btn-primary disabledButton">Download</button>

Now this should work

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

UPDATED as OP mentioned he has to use an anchor

Workaround one:

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

Workaround two: (Prevent default)

 $('.disabledButton').click(function (e) {
    e.preventDefault();
});

edited Apr 04 '17 at 14:20

answered Apr 03 '17 at 22:17

Nawwar Elnarsh

score 0 · Accepted Answer · answered Apr 03 '17 at 22:36

The reason it is not working is because it's a hyper link and it does not have the disabled property. Only thing you can do is preventDefault

<a type="button" class="btn btn-primary disabledButton">Download</a>

$('a.disabledButton').on('click', function(e) {
    e.preventDefault();
});

2 Answers2