disable a link after clicked once using jquery?

Question

hi can someone please help, im trying to find a way of disabling a link after its been clicked once per user session, can i do this in jquery?

Im brand new to javasript and jquery so could someone please show me what id need to do thanks.

Event handlers and Cookies. That should lead you to the way. — Joseph, Feb 10 '13 at 02:49
possible duplicate of ["Disable" a link temporarily when clicked?](http://stackoverflow.com/questions/5380722/disable-a-link-temporarily-when-clicked) — John Zwinck, Feb 10 '13 at 02:49
i dont want to disable the link temporarily though. i want to keep it disabled. — Joe Dargie, Feb 10 '13 at 02:51

score 3 · Answer 1 · answered Feb 10 '13 at 02:50

Bind event.preventDefault() to prevent the default browser event of following a link. Do it on subsequent click only (so that on first click it will allow it - this is what you want).

$(".oncelink").one('click',function(e){
    $(this).on('click',function(ev){
      ev.preventDefault();
    });  
});

score 1 · Answer 2 · answered Feb 10 '13 at 02:53

You have to put some check in server side as well for this kind of logic to work. But in client side using jQuery you can do something like

$('a').on('click', function()
{
    var me = $(this);
    //You can also set some attribute value if you do not want to use class
    if(me.hasClass('disabled'))
    {
        return false;
    }
    else
    {
        me.addClass('disabled');
    }
});

danronmoon · Answer 3 · 2013-02-10T03:16:13.060

A way to persist state between HTTP connections is by using cookies. You should really be using a server-side language for cookie setting/getting, as client-side cookie setting/getting can get messy , not to mention be insecure and easy to exploit. Also, if the user has JS turned off in their browser, this wouldn't even work, making your efforts worthless. However, it would look something like this:

// on dom ready

var onceButton = document.getElementById('once');
function disableButton () {
    onceButton.disabled = 'disabled';
    document.cookie="disable_button=1";

    // prevent listening on future clicks
    onceButton.removeEventListener('click', disableButton, false); 
}

if (document.cookie.indexOf('disable_button=1;') === -1) { 
    // if no cookie set, wait until click happens to disable button
    onceButton.addEventListener('click', disableButton, false);
} else {
    // cookie set, disable immediately
    disableButton();
}

disable a link after clicked once using jquery?

3 Answers3