如何禁用HTML链接
我有一个<td>内的链接button，我必须禁用。 这适用于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');
注意 – 我不能注销锚点标签的点击function，因为它是dynamic注册的。 我必须在禁用模式下显示链接。
您不能禁用链接（以便携式方式）。 你可以使用这些技术中的一种（每一种都有其自身的优点和缺点）。
CSS的方式
这应该是正确的方式 （但稍后会看到），当大多数浏览器将支持它：
a.disabled { pointer-events: none; }
例如，Bootstrap 3.x就是这样做的。 目前（2016年）只有Chrome，FireFox和Opera（19+）支持。 Internet Explorer从版本11开始支持这个function，但不支持链接，但它可以在外部元素中使用，例如：
span.disable-links { pointer-events: none; }
附：
<span class="disable-links"><a href="#">...</a></span>
解决方法
我们可能需要为pointer-events: none定义一个CSS类pointer-events: none但是如果我们重用了disabled属性而不是CSS类呢？ 严格来说， disabled不支持<a>但浏览器不会抱怨未知的属性。 使用disabled属性IE将忽略pointer-events但它会尊重IE特定的disabled属性; 其他符合CSS的浏览器将忽略未知的 disabled属性和荣誉pointer-events 。 比写更容易解释：
a[disabled] { pointer-events: none; }
IE 11的另一个选项是将链接元素的display设置为block或inline-block ：
<a style="pointer-events: none; display: inline-block;" href="#">...</a>
请注意，这可能是一个便携式的解决scheme，如果你需要支持IE浏览器（你可以改变你的HTML），但…
所有这一切说请注意， pointer-events只禁用…指针事件。 链接仍然可以通过键盘导航，那么你也需要应用这里描述的其他技术之一。
焦点
结合上面介绍的CSS技术，您可以以非标准方式使用tabindex来防止元素被聚焦：
<a href="#" disabled tabindex="-1">...</a>
我从来没有检查过它与许多浏览器的兼容性，那么你可能需要自己testing之前，使用它。 它有没有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属性，如果你关心这个，那么用一个类replace属性，用.hasClass("disabled")replace.is("[disabled]")用addClass()和removeClass()去除）。
ZoltánTamási 在评论中指出： “在某些情况下，点击事件已经被绑定到某个”真正的“函数上（例如使用knockoutjs）。在这种情况下，事件处理程序的sorting可能会导致一些麻烦。error handling程序链接的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"); });
就个人而言，我不太喜欢这个解决scheme（如果你不需要做更多的禁用链接），但它可能会更多的兼容，因为各种方式来跟随一个链接。
假点击处理程序
添加/删除onclick函数return false ，链接将不被遵循。 要禁用链接：
$("td > a").attr("disabled", "disabled").on("click", function() { return false; });
重新启用它们：
$("td > a").removeAttr("disabled").off("click");
我不认为有一个理由喜欢这个解决scheme，而不是第一个。
造型
样式更简单，无论您使用哪种解决scheme来禁用链接，我们都添加了disabled属性，以便您可以使用以下CSS规则：
a[disabled] { color: gray; }
如果您使用的是类而不是属性：
a.disabled { color: gray; }
如果您使用的是UI框架，您可能会看到禁用的链接的样式不正确。 例如，Bootstrap 3.x处理这个场景，并且button被disabled属性和.disabled类。 相反，如果您正在清除链接（或者使用其他JavaScript技术之一），则还必须处理样式，因为没有href的<a>仍然被绘制为已启用。
可访问的富Internet应用程序（ARIA）
不要忘记还包括属性aria-disabled="true"以及disabled属性/类。
得到了在CSS的修复。
td.disabledAnchor a{ pointer-events: none !important; cursor: default; color:Gray; }
上面的CSS应用到锚标记将禁用单击事件。
详情请查看这个链接
感谢所有发布解决scheme的人（尤其是@AdrianoRepetti），我将多种方法结合起来，提供了一些更高级的disabledfunction（并且可以跨浏览器）。 代码如下（根据您的喜好，ES2015和coffeescript）。
这提供了多层次的防御，因此被标记为禁用的锚实际上也是如此。 使用这种方法，你得到一个你不能做的锚点：
- 点击
- 选项卡并打回车
- 盯住它将把焦点移到下一个可调焦的元素
- 它知道是否随后启用了锚点
如何
-
包括这个CSS，因为它是第一道防线。 这假定您使用的select器是
a.disableda.disabled { pointer-events: none; cursor: default; } -
接下来，在ready上实例化这个类（使用可选的select器）：
new AnchorDisabler()
ES2015类
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
试试这个元素：
$(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”。
禁用链接访问触摸设备上的其他页面。
if (control == false) document.getElementById('id_link').setAttribute('href', ''); else document.getElementById('id_link').setAttribute('href', 'page/link.html'); end if;
你不能禁用一个链接，如果你希望这个点击事件不应该触发，那么只需从该链接中Remove该action 。
$(td).find('a').attr('href', '');
欲了解更多信息： – 可被禁用的元素
我会做类似的事情
$('td').find('a').each(function(){ $(this).addClass('disabled-link'); }); $('.disabled-link').on('click', false);
像这样的东西应该工作。 您为要禁用的链接添加一个类，然后在有人点击时返回false。 为了使他们只是删除类。
我已经结束了下面的解决scheme，可以使用属性， <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中的asp.net或链接button的超链接。
$("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"/>
所以调整器find锚点（图像只是箭头）的位置，并将禁用器放在顶部。 禁用者的图像是一个半透明的灰色方块（改变html中的禁用者的宽度/高度以匹配你的链接）来显示它被禁用。 浮动允许页面dynamicresize，禁用者将在windowResizer（）中效仿。 你可以通过谷歌find合适的图像。 为了简单起见，我已经将相关的CSS内联。
那么根据一些条件，
$('#backdisabler').css({'visibility':'hidden'}); $('#nextdisabler').css({'visibility':'visible'});
我想很多这些都是在想。 添加一个你想要的类，比如disabled_link 。
然后让CSS有.disabled_link { display: none }
繁荣现在用户不能看到链接，所以你不必担心他们点击它。 如果他们做了一些事情来满足可点击的链接，只需使用jQuery删除类：
$("a.disabled_link").removeClass("super_disabled") 。 轰隆！
