关于ng-disabled 不起作用的解决办法

最新推荐文章于 2022-04-20 22:12:27 发布

式子双

最新推荐文章于 2022-04-20 22:12:27 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： angular

本文链接：https://blog.youkuaiyun.com/u012438714/article/details/51379569

前端专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了Angular中ng-disabled指令在button和非按钮元素如span/div上的不同表现，并提供了通过CSS解决span元素下ng-disabled失效的方法。通过实例演示了如何使用CSS阻止JavaScript点击事件触发，从而使ng-disabled功能正常生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-disabled 在button中是起作用的，当在span/div中是不起作用的，有时候业务需求的点击操作是在非button上实现，

<button ng-click="event()" ng-disabled="showClicked">Click Me</button>（这种情况是起作用的）

当把BUTTON换成SPAN就不正常了，ng-click依然起作用，<span ng-click="event()" ng-disabled="showClicked">Click Me</span>
解决方法
在CSS中定义一下span的样式即可，很简单：
span[disabled="disabled"] {
    pointer-events: none;//阻止JavaScript点击动作触发的事件
}
这时NG-DISABLED就起作用了。