jQuery 使用 prop 或 attr 禁用 link 元素

Question

如果不允许用户点击它们，我正在使用 jQuery 禁用 hyperlinks。

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

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

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

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

如果 disabled 实际上不应该出现在 link 上，是否有任何其他简单的方法来禁止用户点击 link，或者我应该删除并重新附加 href 属性？

Answer 1

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

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

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

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

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

在标志设置为 false 的情况下，您可能需要考虑设置 UI 的样式，以便显而易见地禁用 link，否则您的用户可能会感到困惑至于为什么点击 link 没有效果。

Answer 2

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

如果您希望用户阻止点击 link，您可以通过以下几种方式实现：

$('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

而第一个选项将使 link 保持原样，而第二个选项将改变 link 的外观，如您在演示中所见。使用第二个选项时，您可以保存 origin-href 以便稍后重新附加它。

Demo

jQuery 使用 prop 或 attr 禁用 link 元素

jQuery disable link elements with prop or attr

html

jquery

disable-link