我有一个链接按钮内<td>,我必须禁用。这适用于IE,但不适用于Firefox和Chrome。
我尝试了以下所有方法,但在Firefox(使用1.4.2 js)上都无法工作:
$(".myLink").attr('disabled', 'disabled');
$(".myLink").attr('disabled', true);
$(".myLink").attr('disabled', 'true');
注意-我不能注销锚标记的点击功能,因为它是动态注册的。我必须在禁用模式下显示链接。
感谢每个发布解决方案的人(特别是@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
试试这个元素:
$(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”。
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类,在这种情况下解决方案将不起作用。