如何禁用HTML链接

Question

我有一个链接按钮<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');

注 - 我无法取消注册锚标记的click函数,因为它是动态注册的.我必须在禁用模式下显示链接.

Answer 1

您无法禁用链接(以便携方式).您可以使用这些技术之一(每种技术都有自己的优点和缺点).

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

请注意,如果您需要支持IE(并且您可以更改HTML),这可能是一个可移植的解决方案,但......

所有这些说请注意,pointer-events只禁用...指针事件.链接仍然可以通过键盘导航,然后您还需要应用此处描述的其他技术之一.

焦点

结合上述CSS技术,您可以使用tabindex非标准方式来防止元素被聚焦:

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

我从未检查过它与许多浏览器的兼容性,那么你可能想在使用它之前自己测试它.它的优点是无需JavaScript即可工作.不幸的是(但显然)tabindex不能从CSS改变.

拦截点击次数

使用a href到JavaScript函数,检查条件(或禁用的属性本身)并且不执行任何操作.

$("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以非标准的方式使用该属性,如果您关心这个,那么用类替换属性并替换.is("[disabled]")为.hasClass("disabled")(使用addClass()和添加和删​​除removeClass()).

ZoltánTamási 在评论中指出"在某些情况下,click事件已经绑定到一些"真正的"函数(例如使用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绘制为启用.

可访问的富Internet应用程序(ARIA)

不要忘记还将属性aria-disabled="true"与disabled属性/类一起包含在内.

Answer 2

得到了CSS的修复.

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

应用于锚标记时,高于css将禁用click事件.

有关详细信息,请查看此链接

Answer 3

感谢所有发布解决方案的人(尤其是@AdrianoRepetti),我结合了多种方法来提供更高级的disabled功能(并且它可以跨浏览器工作).代码如下(根据您的偏好,ES2015和coffeescript).

这提供了多级防御,因此标记为禁用的锚实际上表现如此.使用这种方法,你得到一个你不能的锚:

• 点击
• 选项卡并点击返回
• 标签会将焦点转移到下一个可聚焦元素
• 它知道随后是否启用了锚

如何

1. 包括这个css,因为它是第一道防线.这假定您使用的选择器是a.disabled

   a.disabled {
     pointer-events: none;
     cursor: default;
   }
   

2. 接下来,准备好实例化此类(使用可选的选择器):

     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

Answer 4

尝试元素:

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

Answer 5

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。

有时引导程序建议使用card-link类，在这种情况下解决方案将不起作用。

Answer 6

只需添加一个 css 属性：

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

这样做您可以禁用锚标记。