Question

我正在尝试禁用链接按钮但没有运气！我尝试了所有可能的解决方案，但我无法限制用户点击该链接按钮。最终用户不应该多次单击链接按钮。点击一下，就是这样！按钮必须马上去！我怎样才能做到这一点？我的按钮位于ModalPopupExtender上，它是一个付款按钮，因此用户点击该按钮可以多次付款:(请帮帮我！

我的解决方案与此相似：

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＆＃39; live＆＃39;功能不起作用：

$(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

你可以这样做：

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);

Answer 3

返回false应该有效。试试这个：

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

Answer 4

你可以尝试这样的事情，给你一个想法：

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

Answer 5

想要这样的事情。

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

Answer 6

我假设您使用的是asp.net链接按钮。如果是，问题可能是回发刷新页面并且您的javascript代码无法正常工作。如果可能的话，尝试从代码后面禁用你的按钮，如button1.Enable = fales;

否则，您可以使用ajax进行付款以防止回发。

<asp:LinkButton id="button1" runat=server" onclientclick="javascript:return callafunction(this);"/>

function callafunction(obj)
{
callPaymentAJAXMethod();
obj.setAttribute("disabled", "true");
return false;
}

如果这是不可能的，并且您需要它以您想要的相同方式工作，请通过添加服务器端隐藏字段来执行棘手的解决方案。最初将其值设置为“0”。然后在linkbutton的click中将代码设置为“1”。然后在页面加载中使用javascript来检查hiddenfiled值，如果它的“1”禁用链接按钮，如下所示。

window.onload=function()
{
if(document.getElementById("hid1").value=="1")
{
document.getElementById("button1").setAttribute("disabled", "true");
}
}

编辑：还有一个提示，如果您使用的是更新面板，请确保在点击按钮后通过检查链接按钮（使用Chrome或Mozilla Inspect元素选项）更新客户端HTML。有时，如果使用更新面板，则可能无法刷新DOM。如果这是问题，请尝试为更新面板添加触发器。

Answer 7

我真的想表明链接已被禁用，我稍微修改了@shousper的代码。

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

我用它来阻止信用卡表单上的多次点击，并且工作正常。

Answer 8

这段代码会在一次点击后停用链接按钮。

<asp:LinkButton clicked="0" ID="cmdSubmit" runat="server" OnClientClick="return AllowClickOnce(this.id);"
                OnClick="cmdSubmit_Click">Submit Order</asp:LinkButton>
 <script type="text/javascript">
            function AllowClickOnce(linkbuttonID)
            {
            var linkbutton = document.getElementById(linkbuttonID);
            if (linkbutton.clicked == '0')
            {
            linkbutton.clicked='1';
            linkbutton.disabled = true;
            return true;
            }
            else
            {
            return false;
            }
            }
        </script>

来源：link

如何使用JavaScript禁用链接按钮

8 个答案: