45

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

<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 事件?
4

7 回答 7

25

阅读w3c Linkthe-a-element

禁用对锚标签无效

相反,您可以通过event.preventDefault()

$('a').click(function(event){
   event.preventDefault();
});
于 2013-09-10T05:33:14.510 回答
12

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

于 2013-09-10T05:32:52.780 回答
3

不,它不适用于a标签,您可以在event.preventDefault() 此处使用 jquery 参考

于 2013-09-10T05:33:03.737 回答
3

如果您不想使用 javascript 来禁用锚点(如其他响应中所建议的那样),您可以省略该href属性,并且锚点将不起作用,甚至会改变它的样式。

<a>A disabled anchor</a>

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

于 2018-05-10T09:44:24.617 回答
1

该按钮是一种输入类型,这就是禁用的原因。锚的工作方式不同。尝试给你的标签一个 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。

于 2015-08-06T14:26:11.810 回答
1

如果稍后要启用锚点,则删除 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

于 2019-09-09T21:26:06.527 回答
0

不幸的是不可能。

另一个不错的选择是使用 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;
}

更多关于 CSS 指针事件的信息(MDN Web Docs)

于 2021-05-13T02:45:30.347 回答