是否“禁用”锚标记的有效属性

Question

如果我有以下简单的代码段：

<div ng-app="myApp">
    <a ng-disabled='true' ng-click="value1=123">click me</a>
    <button ng-disabled='true' ng-click="value2=123">click me</button>
    =={{value1}}==
    =={{value2}}==
</div>

正如您从小提琴中看到的那样：http://jsfiddle.net/basarat/czVPG/ 该按钮不可点击，并且 ng-click （这只是一个 jquery on('click',function(){}) ）不会执行。但是它确实为锚标记执行。

• 是因为 disabled 不是锚标记的有效属性吗？
• 如果是，为什么在一个按钮没有触发的情况下，它仍然会触发 dom click 事件？

Answer 1

很遗憾，不可能。

这里的另一个不错的选择是使用 CSS！在那个禁用的链接上敲一个班级！

.disabled {
  // Prevent element being interactive / the target of pointer events.
  pointer-events: 'none';

  // Additional styles to make it 'look' disabled below
  opacity: 0.5;
}

More on CSS Pointer events here (MDN Web Docs)

Answer 2

如果要在以后启用锚点，删除 href 或将其设置为“#”会很痛苦，因为你需要将 href 重置为它应该链接到的任何值。相反，我只是为标签添加了一个禁用属性、一个单击事件处理程序和一些 css。这样可以很容易地看到锚被禁用，但如果启用它会去哪里。

是的，锚选项卡不支持 disabled 属性，但 CSS 属性选择器确实找到了它，jQuery 也是如此。因此，虽然下面的解决方案是混合的 jQuery/javaScipt/CSS，但它确实提供了一种更好的方法来禁用/启用锚点，它支持使用 javaScript 向标签动态添加/删除禁用属性。请注意，这仅经过测试并发现在 Chrome 中有效。

<style>
  a:disabled,               /* This doesn't do anything, but hopefully one day ... */
  a[disabled]               /* This activates when the disabled attribute is added. */
    {
      cursor: not-allowed;  /* Indicate that the link is not to be click! */
    }
</style>

<script>
  // Use the same css selectors to find all of the disabled anchors ...

  $( 'a:disabled, a[disabled]' )
  .click( function( event ) {

            //
            // Prevent disabled anchors from doing their click action ...
            //
            // Need to recheck that the anchor is still disabled, because the
            // jQuery that initially found this anchor and set this event
            // handler doesn't affect the anchor after the event is set.
            //

            // Is this anchor still disabled?

            if( this.hasAttribute( 'disabled' ) ) {

              event.preventDefault();

            }

          } );
</script>

这是一个 codePen 演示： https://codepen.io/howardb1/pen/XWrEKzP

Answer 3

如果您不想使用 javascript 来禁用锚点（如其他响应中所建议的那样），您可以省略 hrefattribute 并且锚点将不起作用，甚至会改变它的样式.

<a>A disabled anchor</a>

注意：我知道我的回答并没有直接谈论 disable 属性，但该信息可能仍然对听众有用，就像对我一样。

Answer 4

按钮是一种输入类型，这就是禁用的原因。锚的工作方式不同。 尝试给你的标签一个 id 并使用 javascript 禁用。

<div ng-app="myApp">
<a id="someid" ng-click="value1=123" >click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==</div>

之后可以使用 js 禁用元素，它的行为应该与输入类型一样。

function DisableButton() {
    var submitButton = document.getElementById("someid");
    if (submitButton != null) {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

确保您获得元素的正确客户端 ID。

Answer 5

阅读w3c Link和the-a-element

禁用对锚标记无效

您可以通过event.preventDefault() 来完成

$('a').click(function(event){
   event.preventDefault();
});

Answer 6

不，它不适用于 a 标签，您可以使用 jquery event.preventDefault() referance here

Answer 7

Disabled 不是锚标记的有效属性。来源：http://dev.w3.org/html5/html-author/#the-a-element