单击后禁用超链接答案

【问题标题】：Disable hyperlink after single click单击后禁用超链接
【发布时间】：2014-08-08 06:14:45
【问题描述】：

我有经典的 ASP 表单，其中有一个超链接如下。 <A href="javascript:ProcessForm()" >go here</A>

如果验证为真，ProcessForm() 将表单提交到另一个页面。

function ProcessForm() {
    if (validateform() == true) {
    document.form1.action = "abc.asp";
    document.form1.submit();
}

如果验证为真，如何在单击后禁用超链接？尝试为超链接添加一个 id 并禁用它，然后文本变灰，但单击灰色文本时，页面会多次提交。还尝试使用 return false onclick。请提出建议。

【问题讨论】：

在进程调用之后，您是否尝试过删除链接而不是禁用它？ $('#link_id').attr('href', '');

标签： javascript hyperlink

【解决方案1】：

设置全局标志：

var hasSubmittedForm = false;

然后检查那个标志：

function ProcessForm() {
    if (hasSubmittedForm) return false;
    else hasSubmittedForm = true;

    if (validateform() == true) {
        document.form1.action = "abc.asp";
        document.form1.submit();
    }
}

【讨论】：

：感谢您的回复。试过这个。但它只有在验证为真时才有效，即使它只创建一条记录，它也会显示一个只有“假”的页面。当验证失败时，它会禁用链接并且用户不能再次单击它。这里页面abc.asp 处理成功的情况下调用页面xyz.asp。请建议

【解决方案2】：

为您的链接添加 onclick 事件：

<form name="form1" method="post" action="">
    <a href="" onclick="ProcessForm(this);">go here</a>
</form>

<script type="text/javascript>
    function validateform() {
        return true;
    }

    function ProcessForm(link) {
        if (validateform() == true) {
            link.removeAttribute('href');
            document.form1.action = 'abc.asp';
            document.form1.submit();
        }
    }
</script>

【讨论】：

@SoftCrearR：感谢您的回复。此代码不会使表单提交。它只是停留在那里。

【解决方案3】：

你可以像这样用 jQuery 来实现它：

给你：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
    $("#RemoveLink").click(function() {
    var url = $(this).attr('href');
    window.open(url);
    $("#RemoveLink").removeAttr("href");
    });
});
</script>

<a href="http://www.google.bg/" id="RemoveLink">go here</a>

经过测试并且可以正常工作，如果这不是您想要的功能，请告诉我，或者将我的答案标记为您问题的答案；)

【讨论】：

@Tonny Struck：感谢您的回复。但是这里ahref调用的是js函数，并没有打开新页面，能否请您包含验证失败时处理的代码，它应该允许用户再次点击。