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

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属性/类。

你可以禁用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按钮

你不能禁用一个链接，如果你想点击事件不应该触发，然后简单地删除该链接的动作。

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

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

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

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属性/类。

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

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

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

---

如何

包括这个css，因为它是第一道防线。这假设你使用的选择器是a.disabled a.disabled { pointer-events:没有; 光标:违约; ｝ 接下来，在ready上实例化这个类(使用可选的选择器): 新的AnchorDisabler ()

---

ES2015类

安装-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