Reputation: 4505

jQuery disable a link

Anyone know how to disable a link in jquery WITHOUT using return false;?

Specifically, what I'm trying to do is disable the link of an item, performing a click on it using jquery which triggers some stuff, then re-enabling that link so that if it's clicked again it works as default.

Thanks. Dave

UPDATE Here's the code. What it needs to do after the .expanded class has been applied is to re-enable the disabled link.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

Upvotes: 310

Answers (18)

IbrarMumtaz

Reputation: 4393

As a back-end engineer, it took me a while to wrap my head around how to do this but here is how i solved the exact same problem.

const resendCodeTimeOutPeriodInMs = 30000; // 30seconds.

function resend2faCodeOnLogin(sendByEmail) {

const resendCodeLinkElement = $('#resendCodeLink');

const disabledState = resendCodeLinkElement.attr('disabled');
if (disabledState === 'disabled') {
    resendCodeLinkElement.preventDefault();
} else {
    resendCodeLinkElement.attr("disabled", true);
    resendCodeLinkElement.addClass('disabled');

    submitForm('#twoFactorResendCodeForm', (response) => {
        setTimeout(function () {
            $('#resendCodeLink').removeClass('disabled');
            resendCodeLinkElement.attr("disabled", false);
        }, resendCodeTimeOutPeriodInMs); 

    }, (response) => {
        console.error(response);
    });
}
}

Standard CSS taken from well known examples off the web:

a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;

My Approach was to ensure a given button is disabled for 30s before the UX can click it again.

Upvotes: 0

Ch'nycos

Reputation: 300

html link example:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="_blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

use this in jQuery

    $('#BT_Download').attr('disabled',true);

add this to css :

    a[disabled="disabled"] {
        pointer-events: none;
    }

Upvotes: 12

Rokan Nashp

Reputation: 351

Just set preventDefault and return false

   $('#your-identifier').click(function(e) {
        e.preventDefault();
        return false;
    });

This will be disabled link but still, you will see a clickable icon(hand) icon. You can remove that too with below

$('#your-identifier').css('cursor', 'auto');

Upvotes: 1

matox

Reputation: 987

I always use this in jQuery for disabling links

$("form a").attr("disabled", "disabled");

Upvotes: 16

shintaroid

Reputation: 1655

unbind() was deprecated in jQuery 3, use the off() method instead:

$("a").off("click");

Upvotes: 2

mga911

Reputation: 1546

This works for links that have the onclick attribute set inline. This also allows you to later remove the "return false" in order to enable it.

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });

Upvotes: 0

André Amaral

Reputation: 135

Just use $("a").prop("disabled", true);. This will really disable de link element. Needs to be prop("disabled", true). Don't use attr("disabled", true)

Upvotes: -2

Peter DeWeese

Reputation: 18333

Here is an alternate css/jQuery solution that I prefer for its terseness and minimized scripting:

css:

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});

Upvotes: 64

Cruz Nunez

Reputation: 3139

I know this isn't with jQuery but you can disable a link with some simple css:

a[disabled] {
  z-index: -1;
}

the HTML would look like

<a disabled="disabled" href="/start">Take Survey</a>

Upvotes: 1

David Fawzy

Reputation: 1076

you can just hide and show the link as you like

$(link).hide();
$(link).show();

Upvotes: 4

jBelanger

Reputation: 1778

If you go the href route, you can save it

To disable:

$('a').each(function(){
    $(this).data("href", $(this).attr("href")).removeAttr("href");
});

Then re-enable using:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

In one case I had to do it this way because the click events were already bound somewhere else and I had no control over it.

Upvotes: 16

Lahmizzar

Reputation: 487

My fav in "checkout to edit an item and prevent -wild wild west clicks to anywhere- while in a checkout" functions

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

So if i want that all external links in a second action toolbar should be disabled while in the "edit-mode" as described above, i'll add in the edit function

$('#actionToolbar .external').attr('disabled', true);

Link example after fire:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

And now you CAN use disabled property for links

Cheers!

Upvotes: 5

Kailas Mane

Reputation: 1935

You can remove click for link by following;

$('#link-id').unbind('click');

You can re-enable link by followings,

$('#link-id').bind('click');

You can not use 'disabled' property for links.

Upvotes: 22

warmth

Reputation: 467

You should find you answer here.

Thanks @Will and @Matt for this elegant solution.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

Upvotes: 3

Hein

Reputation: 921

For others who came here via google like me - here's another approach:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

Remember: not only this is a css class

class="buttonstyle"

but also these two

class="buttonstyle disabled"

so you can easily add and remove further classes with jQuery. No need to touch href...

I love jQuery! ;-)

Upvotes: 70

karim79

Reputation: 342625

$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

That will prevent the default behaviour of a hyperlink, which is to visit the specified href.

From the jQuery tutorial:

For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling event.preventDefault() in the event handler

If you want to preventDefault() only if a certain condition is fulfilled (something is hidden for instance), you could test the visibility of your ul with the class expanded. If it is visible (i.e. not hidden) the link should fire as normal, as the if statement will not be entered, and thus the default behaviour will not be prevented:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});

Upvotes: 378

TStamper

Reputation: 30354

Try this:

$("a").removeAttr('href');

EDIT-

From your updated code:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);

Upvotes: 118

Michał Chaniewski

Reputation: 4806

Just trigger stuff, set some flag, return false. If flag is set - do nothing.

Upvotes: 3

jQuery disable a link

Answers (18)

Related Questions