Question

我有一个锚标记，其文本在禁用时变为灰色。我知道这是对任何被禁用的IE的默认处理。

我正在尝试使用下面提到的CSS使用a[disabled=""]和[disabled =“disabled”]覆盖锚标记的颜色。但是这两个课程都不起作用。

<a href="www.google.com" disabled="">Google</a>

CSS：

a:link, a:active, a:visited {
color: blue !important;
display: block;
font: bold 12px;
padding-left: 5px;
position: relative;
text-decoration: none;
width: auto;
line-height: 35px;
}

a.[disabled=""] , a[disabled="disabled"]
{
color: blue !important;
cursor: default;
}

我尝试过的另一种方法是使用JQuery添加内联样式。

if ($("a").attr('disabled', "")) {
  $("a").css({ "color": "blue" })
}

以上都不起作用。对此有什么解决方案吗？

Answer 1

根据规范，a元素没有disabled属性！它不是可以禁用的元素。

根据https://html.spec.whatwg.org/#the-a-element

interface HTMLAnchorElement : HTMLElement {
  attribute DOMString target;
  attribute DOMString download;
  [PutForwards=value] attribute DOMSettableTokenList ping;
  attribute DOMString rel;
  readonly attribute DOMTokenList relList;
  attribute DOMString hreflang;
  attribute DOMString type;

  attribute DOMString text;

  // also has obsolete members
};

并且，根据https://html.spec.whatwg.org/#disabled-elements

An element is said to be actually disabled if it one of the following:

a button element that is disabled
an input element that is disabled
a select element that is disabled
a textarea element that is disabled
an optgroup element that has a disabled attribute
an option element that is disabled
a menuitem element that has a disabled attribute
a fieldset element that is a disabled fieldset

如果你发现自己试图disable一个锚（a），那你就错了。

如果您确实需要指示已禁用a并且不应该响应与它的交互，那么您可以使用pointer-events css属性来实现此目的。（指针事件属性受所有现代浏览器支持，但不受IE＆lt; 11 支持

示例代码段 ：

a.disabled { 
    pointer-events: none;
    color: rgba(0,0,128,0.5);
}

<a href="#">this is a normal link</a> | <a href="#" class="disabled">this appears to be disabled</a>

编辑：

根据您的评论，如果您需要支持旧版本的IE，那么您可以：

使用jQuery来防止默认行为（e.preventDefault()）或
正确删除href属性并设置a（不包含href）样式。

下面的示例显示了所有三个选项（包括之前给出的选项）：

示例代码段2 ：

$("a.disabled").on("click", function(e) {
    e.preventDefault();
});

a.disabled { 
    pointer-events: none;
    cursor: default;
    color: rgba(0, 0, 128, 0.5);
}
a:not([href]) {
    text-decoration: underline;
    color: rgba(0, 0, 128, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com">this is a normal link</a> | 
<a>this is a disabled link</a> | 
<a href="http://example.com" class="disabled">this appears to be disabled</a>

Answer 2

以下是使用CSS或jQuery设置它的方法。你的CSS和jQuery的语法都不正确。

＆＃13;

$('a[disabled]').css('color', 'blue');

＆＃13;

a[disabled]{color:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" disabled="disabled">Test</a>

＆＃13;

Answer 3

首先感谢@Abhitalks对规格的指导。结合他的提示，我想出了一个问题的解决方案：

1）每当我想禁用它时，我都会向锚元素添加一个'禁用'类：

$("a").addClass("disabled");

2）由于pointer-events: none;不适用于IE，我有以下代码段可以在所有浏览器中完成工作：

$("a").click(function (e) {
    e.preventDefault();
});

3）在CSS中为“禁用”类定义一个类：

a.disabled {
 color:red;
}

你去吧！我们完成了！

P.S：请注意！如果您要禁用preventDefault()，请使用以下代码：

$("a").unbind('click');

禁用锚标记时，文本在IE中变为灰色

3 个答案:

编辑：