<a href="gohere.aspx" class="my-link">Click me</a>
我做到了
$('.my-link').attr('disabled', true);
但它不起作用
有没有一种简单的方法来使用jquery禁用超链接?删除href?我宁愿不吝啬href。因此,如果我可以在不删除href的情况下执行此操作,那就太棒了。
您可以绑定返回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);
这也很有效。简单,精简,并且不需要使用jQuery。
<a href="javascript:void(0)">Link</a>
尝试:
$(this).prop( "disabled", true );
我知道这是一个老问题,但它似乎仍未得到解决。遵循我的解决方案......
只需添加此全局处理程序:
$('a').click(function()
{
return ($(this).attr('disabled')) ? false : true;
});
这是一个快速演示:http://jsbin.com/akihik/3
你甚至可以添加一些css来为具有disabled属性的所有链接提供不同的样式。
e.g
a[disabled]
{
color: grey;
}
无论如何,似乎disabled属性对a
标签无效。如果您更喜欢遵循w3c规范,则可以轻松采用符合html5标准的data-disabled
属性。在这种情况下,您必须修改以前的代码段并使用$(this).data('disabled')
。
删除href
属性肯定似乎要走了。如果由于某种原因您稍后需要它,我会将其存储在另一个属性中,例如
$(".my-link").each(function() {
$(this).attr("data-oldhref", $(this).attr("href"));
$(this).removeAttr("href");
});
这是唯一的方法,它可以使链接显示为禁用,而无需编写自定义CSS。只需将单击处理程序绑定为false,就会使链接看起来像普通链接,但点击它时不会发生任何事情,这可能会让用户感到困惑。如果你要去点击处理程序路由,我至少还会.addClass("link-disabled")
写一些CSS,使得与该类的链接看起来像普通文本。
$('.my-link').click(function(e) { e.preventDefault(); });
你可以使用:
$('.my-link').click(function(e) { return false; });
但我不喜欢自己使用它,因为它更加神秘,即使它在很多jQuery代码中被广泛使用。
pointer-events
CSS属性在支持(caniuse.com)时有点缺乏,但它非常简洁:
.my-link { pointer-events: none; }
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;
}
disabled
属性对我认为的所有HTML元素都无效,请参阅MSDN article。那个和残疾人的正确值只是“禁用”。最好的方法是绑定一个返回false的click函数。
附加一个包含指针事件的类:非
.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}
$(this).addClass('active');
下面将用它的文字替换链接
$('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());
});
解释:在上面给出的代码片段中,在第一个片段中,我们仅用它的图像替换所有图像链接。之后我们用它的文本替换文本链接。