如何使用 JavaScript 禁用链接按钮

Question

我正在尝试禁用链接按钮，但没有运气！我尝试了所有可能的解决方案，但是我不能限制用户点击该链接按钮。最终用户不能多次点击链接按钮。一键就可以了！按钮必须马上走！我怎样才能做到这一点？我的按钮在 ModalPopupExtender 上，它是一个 Make Payment 按钮，因此想象用户点击该按钮不止一个进行多次付款:(请帮助我！

我的解决方案与此类似：

function returnFalse() {
     return false;
}

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

Answer 1

我想我会把我的解决方案扔在那里：

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

这在 IE10 中对我来说很好，但我不明白为什么它在旧版本中也不起作用。

如果您使用异步回发，并且您的 UpdatePanel 还包含您不希望用户疯狂点击的按钮，则以下是我的解决方案，因为 jQuery 'live' 功能不起作用：

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

希望有人觉得它有用:)

Answer 2

返回 false 应该可以。试试这个：

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

Answer 3

你可以试试这样，给你一个想法：

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

Answer 4

想要这样的东西。

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

Answer 5

我真的很想显示链接被禁用，我稍微修改了@shousper 的代码。

$('a.btn').click(function() {
    var self = $(this);
    setTimeout(function() { self.fadeTo("fast", .5).removeAttr("href"); }, 1);
    return true;
});;

我用它来防止多次点击信用卡表单，效果很好。

Answer 6

你可以这样做：

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

HTML：

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

（或）试试这个：

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