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

【问题标题】：jQuery disable link elements with prop or attrjQuery 使用 prop 或 attr 禁用链接元素
【发布时间】：2015-04-27 08:11:46
【问题描述】：

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

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

我假设表单元素是 <input ...> 元素，所以不是链接 (<a>)

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

如果disabled 实际上并不意味着在链接上，有没有其他简单的方法来禁止用户点击链接，或者我应该删除并重新附加href 属性？

【问题讨论】：

【解决方案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 以便以后重新附加它。

【讨论】：

【解决方案2】：

如您所见，disabled 用于表单输入，不适用于a 元素。

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

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

或者，如果您只想停止链接而不执行任何自定义逻辑：

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

在标志设置为false 的情况下，您可能需要考虑设置 UI 的样式，以便明显地禁用链接，否则您的用户可能会对单击链接无效的原因感到困惑。

【讨论】：