禁用 LinkButton 并不会禁用 JavaScript 中的点击事件

Question

我想在客户端禁用一个LinkButton的点击。

objLinkButton.disabled = true;
// or 
objLinkButton.disabled = -1;

这会禁用链接，但我仍然能够单击链接并进行PostBack。

有没有办法禁用这个链接。

代码：

<asp:linkbutton id="xyz" runat="server"
                onClick="javascript:LinkDisable(this)" ></asp:linkbutton>

这段文字涉及到IT技术，其中提到了一个渲染为链接的内容，该链接执行一个后台提交操作。我想在新窗口中打开该页面。

我的目标是...当我第一次点击链接时，它会打开一个新页面，然后禁用该链接。

我的做法是...在该链接的onClick事件中，我使用了一个JavaScript函数，具体如下：

在LinkDisable函数中...

function LinkDisable(obj)
{
obj.disabled = -1;
obj.href = '#';
//Cant return false from here.. otherwise it wont postback...
}

当我这样做时，链接会变灰，但我仍然可以单击它。我想阻止用户第二次点击它。 任何帮助都将不胜感激。

- Ben

---

你可以提供一份代码示例吗？ - bendewey

Answer 1

如果您想禁用一个链接按钮，只需使用以下代码。 标记

<asp:LinkButton ID="lnkButton" Text="Submit" runat="server">
</asp:LinkButton>

C# 代码

this.lnkButton.Attributes.Add("disabled","disabled");

- Hemal

Answer 2

我正在基于 tvanfosson 的回答进行构建。他使用 jQuery 的答案效果很好，但如果您有验证器，它会造成混乱。以下是：

var code = null;
$(document).ready(function () {
    var button = $('#SubmitPaymentLnkBtn');
    code = button.attr('href').replace(/javascript:/, ''); 
    button.attr('href', '#'); // replace postback function
    button.click(function () {
        if (Page_ClientValidate('PaymentInfo')) {
                           // now only runs if above validationGroup is valid
            $(this).unbind('click'); 
            if (code) {
                $(this).addClass('disabled-btn');
                eval(code);  // do post back
            } 
        }
    });
});

请在您的标记中将ClientIDMode设置为Static。

<asp:LinkButton ID="SubmitPaymentLnkBtn" Text=" submit " runat="server" CssClass="BlackBgText" ValidationGroup="PaymentInfo" Font-Size="22px"  onclick="SubmitPaymentLnkBtn_Click" ClientIDMode="Static" />

- James Reategui

Answer 3

使用jQuery，您可以在浏览器中独立地完成此操作，方法是替换href或添加点击处理程序以预先阻止链接被跟踪。

$('#objLinkButton').attr('href','#').addClass('disabled-link');

或者

$('#objLinkButton').click( function() { return false; } )
                   .addClass('disabled-link');

disabled-link类有一些CSS来改变链接的外观，使其在视觉上看起来被禁用。

请注意，如果此控件位于命名容器内（如GridView或UserControl），则必须使用id的“以...结尾”的选择器引用名称。

$('id$="objLinkButton"')...

编辑：根据您的更新，尝试这个：

var code = null;
$(document).ready( function() {
    var button = $('#objLinkButton');
    code = button.attr('href').replace(/javascript:/,''); // save postback function
    button.attr('href','#'); // replace postback function
    button.click( function() {
        $(this).unbind('click'); // get rid of click handler so it only fires once
        if (code) { // if link hasn't been used
            eval(code);  // do post back
        }
    });
}); 

- tvanfosson

---

感谢您的解决方案，但我只需要一个基本的解决方案。目前不使用Jquery。我需要开始。 - Ben

你可以不用jQuery来做这件事，但是说实话，jQuery相当基础，其他任何东西都只是在重新实现jQuery的一部分。一旦你有了一点JavaScript知识并开始尝试使其浏览器中立，你会发现投资一点时间学习和使用框架是值得的。 - tvanfosson

我明白你的观点，谢谢你的帮助，tavnfosson。但我仍然无法解决这个问题... 只是禁用它并返回false对我没有用，因为我必须第一次点击该链接然后禁用它。我会尝试以某种方式解决它... 目前我不知道解决方法。 - Ben

代码将被重置为NULL，如果您进行了回发，整个页面将被重新呈现。如果我错了，请纠正我。 - Ben

我理解你的意思是PostBack在另一个窗口中发生。如果这不正确，我们浪费了很多时间。您可以在服务器端删除LinkButton并将其替换为Literal。 - tvanfosson

不完全准确，PostBack将在同一页上进行...但是在PostBack之后会打开一个新窗口。我猜当前页面仍然会被刷新。我在一个简单的测试应用程序上尝试了您的解决方案，它确实重置了它...为什么当前页面会刷新，这是另一个问题，我需要找出原因。 - Ben

Answer 4

在不使用jQuery的情况下禁用链接（并将其呈现为普通文本）的最简单方法是完全删除它的href属性。

例如，这里是呈现的链接：

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

还需要的JavaScript代码：

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

这对我在IE和Firefox中都有效，但您可能希望进行更广泛的测试。

- codemonkeh

Answer 5

这是基于您发布的评论进行编辑，以允许在第一次单击时但不允许后续单击来跟踪链接按钮。

为了允许在第一次单击时点击链接，但之后不允许点击，请在页面上创建一个变量来跟踪单击。

var clicked = 0;

由于链接按钮在前端生成 href，因此您可以这样做

<a href="#" OnClientClick="return false"></a>

OnClientClick 是特定于 .NET 的。

如果您只想在某些情况下在页面加载后执行它：

<a href="" id="linkbutton">

var linkbutton = document.getElementById("linkbutton");
linkbutton.onclick = function(){
   if(clicked != 0){
      //if other than 0, not followed
      return false;
   }
   else{
      //link is followed here since it's the first time it's being clicked and clicked value = 0
      clicked = clicked + 1;
   }
}

- DLS

---

感谢您的回复。不能这样做...因为即使第一次也无法点击链接。我希望链接在第一次被点击时打开一个新窗口。但是在此之后，即第二次点击后，我希望将其禁用，即不能再点击。 - Ben

嗨Dhana，这个解决方案适用于普通链接，而不适用于由LinkButton创建的链接。问题在于...在LinkButton的情况下，它会进行一次postback。因此，每次进行postback时，您用于跟踪的变量都会被重置。在这种情况下，我无法修改服务器代码。 - Ben

我忘记了 postback 的事情！另一种 hackish 的方法是将它分配给 cookie，这样就会持久化。 - DLS

谢谢Dhana...我收回我的评论...因为我正在发布并在新窗口中打开。 - Ben

Answer 6

找到解决方案了...这些JavaScript解决方案可以工作，但如果您刷新页面...它将清除变量。

所以那里有一个错误...

使用"userData"找到解决方案...IE会话数据...真的很酷。

请查看此链接：http://www.eggheadcafe.com/articles/20010615.asp。

- Ben

Answer 7

试试这个。最简单的例子

<asp:LinkButton ID="LinkButton6" runat="server" disabled="disabled" OnClientClick="return false;"> Test Button</asp:LinkButton>

- Joy Fernandes