jquery - 使用 jQuery 禁用超链接

Question

<a href="gohere.aspx" class="my-link">Click me</a>

我做了

$('.my-link').attr('disabled', true);

但它没有用

有没有一种简单的方法可以使用 jquery 禁用超链接？删除href？我宁愿不摆弄href。因此，如果我可以在不删除href的情况下做到这一点，那就太好了。

Answer 1

您可以绑定返回 false 的单击处理程序：

$('.my-link').click(function () {return false;});

要重新启用它，请取消绑定处理程序：

$('.my-link').unbind('click');

请注意，这disabled不起作用，因为它仅用于表单输入。

---

jQuery 已经预料到了这一点，从 jQuery 1.4.3 开始提供了一个快捷方式：

$('.my-link').bind('click', false);

并取消绑定/重新启用：

$('.my-link').unbind('click', false);

Answer 2

我知道这是一个老问题，但似乎仍未解决。遵循我的解决方案...

只需添加这个全局处理程序：

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

这是一个快速演示：http: //jsbin.com/akihik/3

您甚至可以添加一些 css 来为所有具有 disabled 属性的链接提供不同的样式。

例如

a[disabled]
{
    color: grey; 
}

无论如何，似乎 disabled 属性对a标签无效。如果您更喜欢遵循 ​​w3c 规范，您可以轻松采用符合 html5 的data-disabled属性。在这种情况下，您必须修改前面的代码片段并使用$(this).data('disabled').

Answer 3

删除该href属性肯定是要走的路。如果由于某种原因您以后需要它，我会将其存储在另一个属性中，例如

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

这是在不编写自定义 CSS 的情况下使链接也显示为禁用的唯一方法。只需将点击处理程序绑定到 false 将使链接看起来像一个普通链接，但点击它时不会发生任何事情，这可能会让用户感到困惑。如果您打算使用点击处理程序路线，我至少还会.addClass("link-disabled")编写一些 CSS 使与该类的链接看起来像普通文本。

Answer 4

$('.my-link').click(function(e) { e.preventDefault(); }); 

你可以使用：

$('.my-link').click(function(e) { return false; }); 

但我自己不喜欢使用它，因为它更神秘，尽管它在许多 jQuery 代码中被广泛使用。

Answer 5

CSS 属性在支持（ caniuse.compointer-events ）方面有点欠缺，但非常简洁：

.my-link { pointer-events: none; } 

Answer 6

function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}

Answer 7

我认为该disabled属性并非对所有 HTML 元素都有效，请参阅MSDN 文章。这和禁用的正确值只是“禁用”。您最好的方法是绑定一个返回 false 的点击函数。

Answer 8

附加一个包含指针事件的类：非

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');

Answer 9

下面将用它的文本替换链接

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

编辑 ：

上面给出的代码仅适用于带有文本的超链接，不适用于图像。当我们尝试使用图片链接时，它不会显示任何图片。

为了使此代码与以下图像链接兼容，将正常工作

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

解释：在上面给出的代码片段中，在第一个片段中，我们仅将所有图像链接替换为其图像。之后，我们用它的文本替换文本链接。

Answer 10

This also works well. Is simple, lite, and doesn't require jQuery to be used.

<a href="javascript:void(0)">Link</a>

Answer 11

尝试：

$(this).prop( "disabled", true );