CSS方式

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');

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

Answer 1

您无法禁用链接（以便携方式）。您可以使用其中一种技术（每种技术都有其优点和缺点）。

CSS方式

当大多数浏览器都支持它时，这应该是正确的方式（但稍后会看到）：

a.disabled {
    pointer-events: none;
}

这就是Bootstrap 3.x所做的事情。目前（2016年）它仅受Chrome，FireFox和Opera（19+）的支持。 Internet Explorer从版本11开始支持此功能，但not for links但它可以在外部元素中使用，如：

span.disable-links {
    pointer-events: none;
}

使用：

<span class="disable-links"><a href="#">...</a></span>

解决方法

我们可能需要为pointer-events: none定义一个CSS类，但是如果我们重用 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更改。

拦截点击次数

将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ásinoted in a comment “在某些情况下，click事件已经绑定到某个”真实“函数（例如使用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");
});

就我个人而言，我不太喜欢这个解决方案（如果你不需要对禁用的链接做更多的事情），但可能更兼容，因为有各种方式来关注链接。

假单击处理程序

在您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将禁用单击事件。

有关详细信息，请查看此link

Answer 3

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

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

点击
tab to并返回
选中它会将焦点移到下一个可聚焦元素
知道随后是否启用了锚

如何

包含此css，因为它是第一道防线。这假设您使用的选择器是a.disabled
```
a.disabled {
  pointer-events: none;
  cursor: default;
}
```
接下来，在就绪时使用可选的选择器实例化此类：
```
  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

我最终得到了以下解决方案，该解决方案可以使用属性overflow-y或类from math import log # Build a cost dictionary, assuming Zipf's law and cost = -math.log(probability). words = open("words-by-frequency.txt").read().split() wordcost = dict((k, log((i+1)*log(len(words)))) for i,k in enumerate(words)) maxword = max(len(x) for x in words) def infer_spaces(s): """Uses dynamic programming to infer the location of spaces in a string without spaces.""" # Find the best match for the i first characters, assuming cost has # been built for the i-1 first characters. # Returns a pair (match_cost, match_length). def best_match(i): candidates = enumerate(reversed(cost[max(0, i-maxword):i])) return min((c + wordcost.get(s[i-k-1:i], 9e999), k+1) for k,c in candidates) # Build the cost array. cost = [0] for i in range(1,len(s)+1): c,k = best_match(i) cost.append(c) # Backtrack to recover the minimal-cost string. out = [] i = len(s) while i>0: c,k = best_match(i) assert c == cost[i] out.append(s[i-k:i]) i -= k return " ".join(reversed(out)) s = 's e ar c h t h i s s t r ing for a def e c t'.replace(' ','') print(infer_spaces(s))：

CSS样式：

<a href="..." disabled="disabled">

Javascript（在jQuery准备中）：

<a href="..." class="disabled">

Answer 6

只需添加一个css属性：

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

这样做可以禁用锚标记。

Answer 7

您无法停用某个链接，如果您希望该点击事件不会触发，那么只需Remove该链接中的action。

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

更多信息： - Elements that can be Disabled

Answer 8

我会做像

这样的事情

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

这样的事情应该有效。您为要禁用的链接添加一个类，然后在有人单击它时返回false。要启用它们，只需删除该类。

Answer 9

要禁用链接以访问触控设备上的其他页面：

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

Answer 10

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>

More is on 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 11

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

Answer 12

您可以禁用 HTML 链接，如下所示：

beta

您可以使用内联 JavaScript：

<style>
    .disabled-link {
        pointer-events: none;
    }
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>

Answer 13

您可以使用它来禁用asp.net的超链接或html中的链接按钮。

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

Answer 14

还有另一种可能的方式，也是我最喜欢的方式。基本上它与lightbox禁用整个页面的方式相同，方法是放置一个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（）中跟随。你可以通过谷歌找到合适的图像。为简单起见，我已将相关的CSS放在内联中。

然后根据某些条件，

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

Answer 15

我认为其中很多都是在思考。添加一个你想要的类，比如disabled_link。
然后让css有.disabled_link { display: none }
现在用户无法看到链接，因此您不必担心他们点击它。如果他们做了某些事情来满足可点击的链接，只需使用jQuery删除该类：
$("a.disabled_link").removeClass("super_disabled")。繁荣完成！

如何禁用HTML链接

15 个答案:

CSS方式

解决方法

焦点

拦截点击次数

清除链接

假单击处理程序

定型

可访问的富Internet应用程序（ARIA）

如何

ES2015等级

Coffescript类：