我有一个链接按钮内<td>,我必须禁用。这适用于IE,但不适用于Firefox和Chrome。

我尝试了以下所有方法,但在Firefox(使用1.4.2 js)上都无法工作:

$(".myLink").attr('disabled', 'disabled');

$(".myLink").attr('disabled', true);

$(".myLink").attr('disabled', 'true');

注意-我不能注销锚标记的点击功能,因为它是动态注册的。我必须在禁用模式下显示链接。


当前回答

试试这个元素:

$(td).find('a').attr('disabled', 'disabled');

禁用一个链接为我在Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/。

Firefox似乎运行得不太好。这个例子是有效的:

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$(document).on('click', 'a', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

注意:为未来禁用/启用的链接添加了'live'语句。 注2:将“live”改为“on”。

其他回答

您不能禁用链接(以可移植的方式)。您可以使用其中一种技术(每种技术都有其优点和缺点)。

CSS的方法

当大多数浏览器都支持它时,这应该是正确的方式(但稍后会看到):

a.disabled {
    pointer-events: none;
}

比如,Bootstrap 3。x。目前(2016年)只有Chrome, FireFox和Opera(19+)很好地支持它。Internet Explorer从版本11开始支持这一点,但不支持链接,但它可以在外部元素中使用,例如:

span.disable-links {
    pointer-events: none;
}

:

<span class="disable-links"><a href="#">...</a></span>

解决方案

我们可能需要为指针事件定义一个CSS类:none,但如果我们重用禁用属性而不是CSS类呢?严格来说,<a>不支持disabled,但浏览器不会抱怨未知属性。使用禁用属性IE将忽略指针事件,但它将尊重IE特定的禁用属性;其他CSS兼容的浏览器将忽略未知的禁用属性和荣誉指针事件。容易的:写的比解释的容易:

a[disabled] {
    pointer-events: none;
}

IE 11的另一个选项是将链接元素的显示设置为block或inline-block:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

注意,如果你需要支持IE,这可能是一个可移植的解决方案(你可以改变你的HTML),但是…

说了这么多,请注意指针事件只禁用…指针事件。链接仍然可以通过键盘导航,然后你还需要应用这里描述的其他技术之一。

焦点

结合上面描述的CSS技术,你可以以非标准的方式使用tabindex来防止一个元素被聚焦:

<a href="#" disabled tabindex="-1">...</a>

我从来没有检查过它与许多浏览器的兼容性,所以你可能想在使用这个之前自己测试一下。它的优点是无需JavaScript即可工作。不幸的是(但显然)tabindex不能从CSS更改。

拦截点击

对JavaScript函数使用href,检查条件(或禁用属性本身),不做任何事情以防万一。

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

要禁用链接,可以这样做:

$("td > a").attr("disabled", "disabled");

要重新启用它们:

$("td > a").removeAttr("disabled");

如果你想要代替.is("[disabled]"),你可以使用.attr("disabled") != undefined (jQuery 1.6+在未设置属性时总是返回undefined),但是is()更清楚(感谢Dave Stewart提供的提示)。请注意,这里我以非标准的方式使用disabled属性,如果你关心这个,那么用一个类替换属性,用. hasclass ("disabled")替换.is("[disabled]")(用addClass()和removeClass()添加和删除)。

Zoltán Tamási在评论中指出,“在某些情况下,点击事件已经绑定到一些“真正的”函数(例如使用knockoutjs)。在这种情况下,事件处理程序的排序可能会导致一些麻烦。因此,我通过绑定一个返回false处理程序到链接的touchstart, mousedown和keydown事件来实现禁用链接。它有一些缺点(它会阻止在链接上启动触摸滚动)”,但处理键盘事件也有防止键盘导航的好处。

注意,如果href没有被清除,用户可以手动访问该页面。

清除链接

清除href属性。使用这段代码,您不需要添加事件处理程序,而是更改链接本身。使用下面的代码禁用链接:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

而这一个是重新启用它们:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

就我个人而言,我不太喜欢这个解决方案(如果你不需要做更多的禁用链接),但它可能更兼容,因为有各种各样的方式来遵循一个链接。

假点击处理程序

添加/删除一个返回false的onclick函数,链接将不会被跟随。禁用链接:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

要重新启用它们:

$("td > a").removeAttr("disabled").off("click");

我不认为有理由选择这个解决方案而不是第一个。

样式

样式化甚至更简单,无论你使用什么解决方案来禁用链接,我们都添加了一个disabled属性,所以你可以使用以下CSS规则:

a[disabled] {
    color: gray;
}

如果你使用的是类而不是属性:

a.disabled {
    color: gray;
}

如果你正在使用一个UI框架,你可能会看到被禁用的链接样式不正确。引导3。例如,X处理这种情况,并且按钮正确地设置了disabled属性和.disabled类。相反,如果您正在清除链接(或使用其他JavaScript技术之一),您还必须处理样式化,因为没有href的<a>仍然显示为启用。

无障碍富互联网应用程序(ARIA)

不要忘记还包括一个属性aria-disabled="true"和disabled属性/类。

我会这样做

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

像这样的东西应该有用。您为想要禁用的链接添加一个类,然后在有人单击它们时返回false。要启用它们,只需删除该类。

禁用在触摸设备上访问另一个页面的链接:

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

我建议将链接转换为按钮,并使用“disabled”属性。您可以查看这个问题,以检查如何将链接转换为按钮:如何创建一个充当链接的HTML按钮

在Razor (.cshtml)你可以做:

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>