我有一个链接按钮内<td>,我必须禁用。这适用于IE,但不适用于Firefox和Chrome。

我尝试了以下所有方法,但在Firefox(使用1.4.2 js)上都无法工作:

$(".myLink").attr('disabled', 'disabled');

$(".myLink").attr('disabled', true);

$(".myLink").attr('disabled', 'true');

注意-我不能注销锚标记的点击功能,因为它是动态注册的。我必须在禁用模式下显示链接。


当前回答

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

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

其他回答

感谢每个发布解决方案的人(特别是@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

在css中得到修复。

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

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

详情请查看此链接

试试这个元素:

$(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”。

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

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

如果你想动态地创建它,你不想关心它是button还是ancor than 在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类,在这种情况下解决方案将不起作用。