jQuery使用prop或attr禁用链接元素

Question

如果不允许用户点击超链接，我正在使用jQuery来禁用超链接。

文档（http://api.jquery.com/attr/）说：

  

要检索和更改DOM属性，例如表单元素的checked，selected或disabled状态，请使用.prop()方法。

我假设表单元素是<input ...>元素，因此不是链接（<a>）

这就是.prop('disabled', true)不起作用的原因，而.attr('disabled', 'disabled')则不行。但是，它应该工作吗？是否有规范说可以禁用链接，在这种情况下点击它们将不会有任何动作？ - 或者只是少数浏览器实现的东西，因为它们很好？

如果disabled实际上不在链接上，是否还有其他简单的方法可以禁止用户点击该链接，或者我应该删除并重新附加href属性？< / p>

Answer 1

根据MDN的规范，不允许使用disabled属性。

如果您希望用户阻止点击该链接，您可以通过以下几种方式进行操作：

$('a').on('click', function(event){
    event.preventDefault(); //prevent the default behaviour of the Link (e.g. redirecting to another page)
});

或者

$('a').removeAttr('href'); //The link is not clickable anymore

虽然第一个选项会保持链接不变，但第二个选项会改变链接的外观，正如您在演示中看到的那样。 使用第二个选项时，您可以保存origin-href以便以后重新附加它。

Demo

Answer 2

如您所见，disabled用于表单输入，无法在a元素上使用。

相反，您可以在preventDefault()元素的点击处理程序中使用a来阻止他们的行为：

$('a').click(function(e) {
    if (clicksAllowedFlag) {
        // your logic here...
    }
    else {
        e.preventDefault();
    }
});

或者，如果您希望仅在不执行任何自定义逻辑的情况下停止链接：

$('a').click(function(e) {
    !clicksAllowedFlag && e.preventDefault();
});

如果将标志设置为false，您可能需要考虑设置UI的样式，以便明显禁用链接，否则您的用户可能会对点击链接无效的原因感到困惑