Javascript 单击HTML链接后禁用该链接

我正在尝试禁用一个链接，该链接在单击表单后提交表单。这是阻止来自同一用户的重复请求所必需的。这是我的代码，但不幸的是它不起作用

<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>

<script type="text/javascript">
    $('#submit-form-link').click(function(){
        $('submit-form-link', this).attr('style', 'pointer-events: none;');
    });
</script>

下一步
$（“#提交表单链接”）。单击（函数（）{
$（'submit-form-link'，this）.attr（'style'，'pointer events:none；'）；
});

---

我觉得我很接近了，但它不起作用。

在第一次单击事件回调函数中再次绑定单击事件

<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>

<script type="text/javascript">
    $('#submit-form-link').click(function(){
        $('submit-form-link', this).attr('style', 'pointer-events: none;');
    });
</script>

$('#submit-form-link').click(function(){
    $('submit-form-link', this).attr('style', 'pointer-events: none;');

     $(this).click(function(e){e.preventDefault})
});

---

在第一次单击事件回调函数中再次绑定单击事件

$('#submit-form-link').click(function(){
    $('submit-form-link', this).attr('style', 'pointer-events: none;');

     $(this).click(function(e){e.preventDefault})
});

---

您必须删除

onclick

属性

$('#submit-form-link').click(function(){
    $(this).removeAttr('onclick');
});

---

而且，

$（'submit-form-link'，this）

是完全错误的。您正在选择类型为

submit form link

的节点，这些节点是

this

的子节点。首先您需要

#提交表单链接

，其次

此

已经是对您刚才单击的链接节点的引用。

您必须删除

onclick

属性

$('#submit-form-link').click(function(){
    $(this).removeAttr('onclick');
});

---

而且，

$（'submit-form-link'，this）

是完全错误的。您正在选择类型为

submit form link

的节点，这些节点是

this

的子节点。首先，您需要提交表单链接，其次，此链接已经是对您刚才单击的链接节点的引用。

这是错误的。摆脱内联onclick事件处理程序，并在文档就绪调用中使用它：

$('#submit-form-link').one('click', function(){
    $('form').submit();
});

这会将单击事件绑定到链接，但在第一次单击后会解除绑定

---

您可以在控制台中的中看到这一点。第一次单击链接时，它会尝试提交表单，但在随后的单击中不会尝试。

您这样做是错误的。摆脱内联onclick事件处理程序，并在文档就绪调用中使用它：

$('#submit-form-link').one('click', function(){
    $('form').submit();
});

这会将单击事件绑定到链接，但在第一次单击后会解除绑定

您可以在控制台中的中看到这一点。第一次单击链接时，它会尝试提交表单，但在随后的单击中不会尝试。请尝试以下操作：

...
$('submit-form-link').off().click(function() { return false; });
...

试试这个：

...
$('submit-form-link').off().click(function() { return false; });
...

下一步
$（“#提交表单链接”）。单击（函数（）{
if（！$（this）.hasClass（'disabled'））{
$（'submit-form-link'，this.attr（'class'，'next disabled'）；
返回true；
}
返回false；
});

在这里，您可以创建一个类

disabled

，并根据需要设置其样式。只需在单击按钮后添加该类，这样您就知道它已被禁用。如果按钮已被单击，则返回false以停止事件。

下一步
$（“#提交表单链接”）。单击（函数（）{
if（！$（this）.hasClass（'disabled'））{
$（'submit-form-link'，this.attr（'class'，'next disabled'）；
返回true；
}
返回false；
});

在这里，您可以创建一个类

disabled

，并根据需要设置其样式。只需在单击按钮后添加该类，这样您就知道它已被禁用。如果按钮已单击，则返回false以停止事件