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(){})）不会执行。但它确实执行锚标记。

是因为禁用不是锚标记的有效属性吗？
如果这是为什么当按钮没有时它仍会触发dom click事件？

Answer 1

阅读w3c Link和the-a-element

禁用对锚标记无效

相反，你可以通过event.preventDefault()

来完成

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

Answer 2

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

Answer 3

不能使用a标记，您可以使用jquery event.preventDefault() referance here

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

如果你不想使用javascript来禁用锚点（在其他响应中被删除），你可以省略href属性，锚点不会工作，并且会甚至改变它的造型。

＆＃13;

<a>A disabled anchor</a>

＆＃13;

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

Answer 6

在实际上要禁用它的情况下，删除href或将其设置为“＃”，如果稍后要启用锚点，将很麻烦，因为您需要将href重置为链接到的任何值。相反，我只是向标签添加了disable属性，并添加了click事件处理程序和一些CSS。这样，可以很容易地将锚视为禁用状态，但是如果启用了锚，则该锚将消失。

是的，锚点选项卡不支持禁用属性，但是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 7

不幸的是不可能。

这里另一个不错的选择是使用 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)

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

7 个答案: