How to disable linkbutton with JavaScript

Question

I am trying to disable a linkbutton but no luck! I tried every possible solution, However I can not limit users click on that link button. End users should not be able to click the link button more than one. One click and that is it! Button must go right away! How can I achieve this? My button is on ModalPopupExtender and it is a Make Payment button so image the user click that button more than one makes multiple payments.

My solutions were similar to this:

function returnFalse() {
     return false;
}
   
function disableLinkButton(clientID) {
     document.getElementById(clientID).disabled = "disabled";
     document.getElementById(clientID).onclick = returnFalse;
}

DUP : stackoverflow.com/questions/9682833/… and stackoverflow.com/questions/754497/… — PresleyDias
– PresleyDias, Commented Apr 24, 2012 at 11:07
@TobiasKrogh, that works but after postback. what if your page sends large amount of data and user clicks the button more than once while page is submitting? — Cute Bear
– Cute Bear, Commented Dec 4, 2012 at 16:50

shousper · Accepted Answer · 2013-04-10 05:19:20Z

Thought I'd throw my solution out there:

$('a.btn').click(function() {
    var self = $(this);
    setTimeout(function() { self.attr('href', 'javascript:void(0);'); }, 10);
    return true;
});

This worked fine for me in IE10, but I can't see why it wouldn't work in older versions too.

If you're using async postbacks and your UpdatePanel's also contain buttons that you don't want users rage clicking, below was my solution seeing as the jQuery 'live' function doesn't work:

$(function() {
    function bindButtonDisabler() {
        $('a.btn').click(function() {
            var self = $(this);
            setTimeout(function() { self.attr('href', 'javascript:void(0);'); }, 10);
            return true;
        });
    }

    bindButtonDisabler(); // Initial bind on DOM ready.

    $(window).load(function() { // Ensure re-bind after postback (optional)
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindButtonDisabler);
    });
});

Hope someone finds it useful :)

omerkirk · Accepted Answer · 2012-04-24 11:08:12Z

0

Returning false should work. Try this:

function disableLinkButton(clientID) {
 document.getElementById(clientID).disabled = "disabled";
 document.getElementById(clientID).onclick = return returnFalse;
}

answered Apr 24, 2012 at 11:08

omerkirk

2,5271 gold badge17 silver badges9 bronze badges

Comments

Fabrizio Calderan · Accepted Answer · 2012-04-24 11:08:18Z

0

You could try something like this, to give you an idea:

document.getElementById(clientID).onclick = function() {
   /* process payment */
   this.onclick = function(){};
}

answered Apr 24, 2012 at 11:08

Fabrizio Calderan

124k26 gold badges172 silver badges183 bronze badges

Comments

4b0 · Accepted Answer · 2012-04-24 11:11:54Z

0

Want some thing like this.

  document.getElementById(clientID).setAttribute("disabled", "true");

answered Apr 24, 2012 at 11:11

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Comments

Community · Accepted Answer · 2015-06-16 07:12:30Z

0

You can do this like this:

function disableLink(id) {
   document.all[id].removeAttribute('href');
}

HTML:

<a id='link1' href="javascript:disableLink('link1');">Click me</a>

(or) try this:

 document.getElementById("#<%=LinkButton.ClientID%>").attr("disabled", true);

edited Jun 16, 2015 at 7:12

CommunityBot

11 silver badge

answered Apr 24, 2012 at 11:06

coder

13.2k32 gold badges116 silver badges221 bronze badges

1 Comment

Cute Bear Over a year ago

first one kills the OnClick event second one disables the button after postback so both didnt worked

Collectives™ on Stack Overflow

How to disable linkbutton with JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related