jQuery禁用具有prop或attr的链接元素

如果不允许用户单击超链接，我将使用jQuery禁用超链接。

文件(http://api.jquery.com/attr/)说：

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

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

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

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

根据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

第一个选项将保持链接的原样，而第二个选项将改变链接的外观，正如您在演示中看到的那样。使用第二个选项时，您可以保存原始href，以便以后能够重新附加它。

演示

正如您所发现的，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的样式，以便链接明显被禁用，否则您的用户可能会困惑于为什么单击链接没有效果。

相关内容