小开

最佳答案

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

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>

解决方案

我们可能需要为pointer-events: none定义一个CSS类，但是如果我们重用 disabled属性而不是CSS类呢?严格地说，<a>不支持disabled，但浏览器不会抱怨disabled0属性。使用disabled属性IE将忽略pointer-events，但它将尊重IE特定的disabled属性;其他兼容CSS的浏览器将忽略disabled0 disabled属性，而尊重pointer-events。容易的:写的比解释的容易:

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

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

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

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

尽管如此，请注意pointer-events只禁用…指针事件。链接仍然可以通过键盘导航，那么你还需要应用这里描述的其他技术之一。

焦点

结合上面描述的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处理程序绑定到链接的__ABC0、__ABC1和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");
});

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

假点击处理程序

添加/删除一个onclick函数，其中return false，链接将不会被跟随。禁用链接:

$("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。例如，使用disabled属性和.disabled类来正确地设置按钮样式。相反，如果你正在清除链接(或使用其他JavaScript技术之一)，你还必须处理样式化，因为没有href的<a>仍然显示为启用。

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

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

小开

试试这个元素:

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

小开

你不能禁用一个链接，如果你想要点击事件不应该触发，那么简单地从该链接Remove action。

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

更多信息:- 可以被禁用的元素

小开

我会这样做

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


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

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

小开

在css中得到修复。

td.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:Gray;
}

以上css应用于锚标记时将禁用点击事件。

有关详细信息，请检查此链接

小开

感谢每个发布解决方案的人(特别是@AdrianoRepetti)，我结合了多种方法来提供一些更高级的disabled功能(并且它可以跨浏览器工作)。代码如下(ES2015和coffeescript根据您的喜好)。

这提供了多个级别的防御，因此标记为禁用的锚实际上是这样的行为。使用这种方法，你得到一个你不能的锚:

点击
按TAB键返回
标签将焦点移动到下一个可聚焦的元素
它知道锚是否随后被启用

如何

包括这个css，因为它是第一道防线。这里假设你使用的选择器是a.disabled
```
a.disabled {
pointer-events: none;
cursor: default;
}
```
Next, instantiate this class on ready (with optional selector):
```
  new AnchorDisabler()
```

ES2015 Class

npm install -S key.js

import {Key, Keycodes} from 'key.js'


export default class AnchorDisabler {
constructor (config = { selector: 'a.disabled' }) {
this.config = config
$(this.config.selector)
.click((ev) => this.onClick(ev))
.keyup((ev) => this.onKeyup(ev))
.focus((ev) => this.onFocus(ev))
}


isStillDisabled (ev) {
//  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
let target = $(ev.target)
if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
return true
}
else {
return false
}
}


onFocus (ev) {
//  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
if (!this.isStillDisabled(ev)) {
return
}


let focusables = $(':focusable')
if (!focusables) {
return
}


let current = focusables.index(ev.target)
let next = null
if (focusables.eq(current + 1).length) {
next = focusables.eq(current + 1)
} else {
next = focusables.eq(0)
}


if (next) {
next.focus()
}
}


onClick (ev) {
// disabled could be dynamically removed
if (!this.isStillDisabled(ev)) {
return
}


ev.preventDefault()
return false
}


onKeyup (ev) {
// We are only interested in disabling Enter so get out fast
if (Key.isNot(ev, Keycodes.ENTER)) {
return
}


// disabled could be dynamically removed
if (!this.isStillDisabled(ev)) {
return
}


ev.preventDefault()
return false
}
}

Coffescript类:

class AnchorDisabler
constructor: (selector = 'a.disabled') ->
$(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)


isStillDisabled: (ev) =>
### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
target = $(ev.target)
return true if target.hasClass('disabled')
return true if target.attr('disabled') is 'disabled'
return false


onFocus: (ev) =>
### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
return unless @isStillDisabled(ev)


focusables = $(':focusable')
return unless focusables


current = focusables.index(ev.target)
next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))


next.focus() if next




onClick: (ev) =>
# disabled could be dynamically removed
return unless @isStillDisabled(ev)


ev.preventDefault()
return false


onKeyup: (ev) =>


# 13 is the js key code for Enter, we are only interested in disabling that so get out fast
code = ev.keyCode or ev.which
return unless code is 13


# disabled could be dynamically removed
return unless @isStillDisabled(ev)


ev.preventDefault()
return false

小开

我认为很多人都想太多了。添加一个你想要的类，比如disabled_link。
然后使css具有.disabled_link { display: none }
现在用户不能看到链接，所以你不必担心他们点击它。如果他们做了一些事情来满足链接是可点击的，只需删除类jQuery:
$("a.disabled_link").removeClass("super_disabled")。做得繁荣!< / p >

小开

您可以使用此选项禁用asp.net的超链接或html中的链接按钮。

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

小开

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

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

小开

还有另一种可能的办法，也是我最喜欢的办法。基本上，这与lightbox禁用整个页面的方式是一样的，通过放置一个div和摆弄z-index。以下是我的一个项目的相关片段。这适用于所有浏览器!!!!!< / em >

Javascript (jQuery):

var windowResizer = function(){ var offset = $('#back').offset(); var buttontop = offset.top; var buttonleft = offset.left; $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'}); offset = $('#next').offset(); buttontop = offset.top; buttonleft = offset.left; $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'}); } $(document).ready(function() { $(window).resize(function() { setTimeout(function() { windowResizer(); }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast }); });

在HTML中

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a> <a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a> <img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/> <img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

因此，调整器找到锚的位置(图像只是箭头)，并将禁用器放在顶部。禁用器的图像是一个半透明的灰色正方形(改变html中禁用器的宽度/高度以匹配您的链接)，以显示它是禁用的。浮动允许页面动态地调整大小，并且在windowResizer()中禁用程序也会这样做。你可以通过谷歌找到合适的图片。为了简单起见，我将相关的css内联放置。

然后基于某些条件，

$('#backdisabler').css({'visibility':'hidden'}); $('#nextdisabler').css({'visibility':'visible'});

小开

我最终得到了下面的解决方案，它可以与属性<a href="..." disabled="disabled">或类<a href="..." class="disabled">一起工作:

CSS样式:

a[disabled=disabled], a.disabled { color: gray; cursor: default; } a[disabled=disabled]:hover, a.disabled:hover { text-decoration: none; }

Javascript(在jQuery准备好):

$("a[disabled], a.disabled").on("click", function(e){ var $this = $(this); if ($this.is("[disabled=disabled]") || $this.hasClass("disabled")) e.preventDefault(); })

小开

Bootstrap 4.1提供了一个名为disabled的类和aria-disabled="true"属性。

例子”

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true" > Primary link </a>

更多的是在getbootstrap.com

所以如果你想让它动态，和you don't want to care if it is button or ancor比在JS脚本中，你需要这样的东西

let $btn=$('.myClass'); $btn.attr('disabled', true); if ($btn[0].tagName == 'A'){ $btn.off(); $btn.addClass('disabled'); $btn.attr('aria-disabled', true); }

但是要小心

该解决方案仅适用于类btn btn-link的链接。

有时bootstrap建议使用card-link类，在这种情况下解决方案不会起作用。

小开

在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>

小开

只需添加一个css属性:

<style> a { pointer-events: none; } </style>

这样做可以禁用锚标记。

小开

你可以禁用HTML链接，如下所示:

<style> .disabled-link { pointer-events: none; } </style> <a href="https://google.com" class="disabled-link">Google.com</a>

你可以使用内联JavaScript:

<a href="javascript:void(0)">Google.com</a>

小开

我建议将链接转换为按钮，并使用“disabled”属性。你可以看到这个问题来检查如何将链接转换为按钮:如何创建一个HTML按钮，就像一个链接

如何禁用HTML链接