我在里面有一个链接按钮<td>，我必须禁用它。这适用于 IE，但不适用于 Firefox 和 Chrome。结构是 - 链接在一个<td>. 我无法在<td>（如 div/span）中添加任何容器
我尝试了以下所有方法，但无法在 Firefox 上运行（使用 1.4.2 js）：
$(td).children().each(function () {
$(this).attr('disabled', 'disabled');
});
$(td).children().attr('disabled', 'disabled');
$(td).children().attr('disabled', true);
$(td).children().attr('disabled', 'true');
注意 - 我无法取消注册锚标签的点击功能，因为它是动态注册的。我必须在禁用模式下显示链接。
您不能禁用链接（以可移植的方式）。您可以使用其中一种技术（每一种都有自己的优点和缺点）。
当大多数浏览器都支持它时，这应该是正确的方法（但见后文）：
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 类，pointer-events: none但是如果我们重用disabled属性而不是 CSS 类会怎样 ？严格来说disabled不支持<a>但浏览器不会抱怨未知属性。使用disabled属性 IE 将忽略pointer-events但它会尊重 IE 特定disabled属性；其他符合 CSS 的浏览器将忽略unknown disabled属性和 Honor pointer-events。写起来比解释容易：
a[disabled] {
pointer-events: none;
}
IE 11 的另一个选项是将display链接元素设置为blockor 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 更改。
使用hrefJavaScript 函数，检查条件（或 disabled 属性本身），以防万一。
$("td > a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
要禁用链接，请执行以下操作：
$("td > a").attr("disabled", "disabled");
要重新启用它们：
$("td > a").removeAttr("disabled");
如果你想而不是.is("[disabled]")你可以使用（jQuery 1.6+ 将在属性未设置时.attr("disabled") != undefined总是返回）但更清晰（感谢 Dave Stewart 的这个提示）。请注意这里我以非标准方式使用该属性，如果您关心这一点，则将属性替换为类并替换为（添加和删除与and ）。undefinedis()disabled.is("[disabled]").hasClass("disabled")addClass()removeClass()
Zoltán Tamási在评论中指出，“在某些情况下，点击事件已经绑定到某个“真实”函数（例如使用 knockoutjs）。在这种情况下，事件处理程序排序可能会导致一些麻烦。因此，我通过绑定返回来实现禁用链接链接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");
});
就我个人而言，我不太喜欢这个解决方案（如果您不必对禁用的链接做更多的事情），但由于跟踪链接的方式多种多样，它可能更兼容。
添加/删除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 框架，您可能会看到禁用的链接样式不正确。例如，Bootstrap 3.x 可以处理这种情况，并且按钮的样式无论是disabled属性还是.disabled类都是正确的。相反，如果您正在清除链接（或使用其他 JavaScript 技术之一），您还必须处理样式，因为<a>没有href仍然被绘制为启用。
不要忘记将属性aria-disabled="true"与disabled属性/类一起包括在内。
在css中得到了修复。
td.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:Gray;
}
当应用于锚标记时，上面的 css 将禁用点击事件。
有关详细信息，请查看此链接
感谢所有发布解决方案的人（尤其是@AdrianoRepetti），我结合了多种方法来提供一些更高级的disabled功能（并且它可以跨浏览器工作）。代码如下（ES2015 和咖啡脚本都基于您的偏好）。
这提供了多层次的防御，以便标记为禁用的锚实际上是这样运行的。使用这种方法，你会得到一个你不能的锚：
包括这个 css，因为它是第一道防线。这假设您使用的选择器是a.disabled
a.disabled {
pointer-events: none;
cursor: default;
}
接下来，在准备就绪时实例化此类（使用可选选择器）：
new AnchorDisabler()
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
}
}
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
尝试元素：
$(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();
}
});
注意：为将来禁用/启用的链接添加了“实时”声明。
注2：将“live”更改为“on”。
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>
因此，如果您想动态地制作它，而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);
}
但要小心
该解决方案仅适用于与 classes 的链接btn btn-link。
有时引导程序建议使用card-link类，在这种情况下解决方案将不起作用。
我最终得到了下面的解决方案，它可以与属性<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();
})
您可以禁用 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>
只需添加一个 css 属性：
<style>
a {
pointer-events: none;
}
</style>
这样做可以禁用锚标记。
我会做类似的事情
$('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;
在 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>
我建议将链接变成一个按钮并使用“禁用”属性。您可以查看此问题以检查如何将链接转换为按钮：How to create an HTML button that act like a link
您可以使用它来禁用 asp.net 的超链接或 html 中的链接按钮。
$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
还有另一种可能的方法，也是我最喜欢的一种。基本上，这与灯箱禁用整个页面的方式相同，方法是放置一个 div 并摆弄 z-index。这是我的一个项目的相关片段。这适用于所有浏览器！！！！
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() 中效仿。您可以通过 google 找到合适的图像。为简单起见，我已将相关的 css 内联。
然后根据一些条件，
$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});
我认为其中很多都是过度思考。添加任何你想要的类，比如disabled_link.
然后让 css 有.disabled_link { display: none }
Boom 现在用户看不到链接，所以你不必担心他们点击它。如果他们做了一些事情来满足可点击的链接，只需使用 jQuery: 删除该类$("a.disabled_link").removeClass("super_disabled")。繁荣完成！