如何为带有ng-disabled属性的禁用按钮添加not-allowed光标？

你需要实现的是当按钮通过ng-disabled满足禁用条件时，显示not-allowed光标。现有代码思路正确，但可能因样式优先级或框架渲染特性导致效果未生效，以下是具体优化方案：

方案1：提升CSS选择器优先级 #

由于按钮使用了Bootstrap的btn类，默认禁用样式可能优先级更高，可通过增强选择器权重来覆盖：

.btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.65;
}

若需更精准针对目标按钮，可进一步限定类名：

.btn.btn-primary:disabled {
  cursor: not-allowed !important;
  opacity: 0.65;
}

方案2：通过ng-class配合条件绑定样式 #

如果ng-disabled的属性变化未及时触发:disabled伪类样式（极端场景下可能出现），可使用ng-class在禁用状态时添加自定义类：

修改后的HTML代码： #

<div style="margin: 0px !important" class="form-group">
  <button class="btn btn-secondary" style="background: none !important;border: 1px solid #555 !important;margin-right: 12px !important" ng-click="closePopup()">${CANCEL}</button>
  <button class="btn btn-primary" style="color: #ffffff !important;background-color: #1F8476 !important;border-color: #1a6f64 !important" 
          ng-disabled="data.rows.length==0 || data.mergingLockedDoc || (data.isContractSelected && data.lockedDoc)" 
          ng-class="{'btn-disabled': data.rows.length==0 || data.mergingLockedDoc || (data.isContractSelected && data.lockedDoc)}"
          ng-click="createNewDoc()">${CREATE_NEW_DOCUMENT}</button>
</div>

对应的CSS代码： #

.btn-disabled {
  cursor: not-allowed !important;
  opacity: 0.65;
  pointer-events: none; /* 确保按钮无法被点击，与disabled属性效果一致 */
}

额外注意 #

• 确保自定义CSS代码在Bootstrap样式之后加载，保证样式能正确覆盖默认规则
• 尽量减少!important的使用，优先通过增强选择器权重来提升样式优先级

内容的提问来源于stack exchange，提问作者ikunjshah