Question

我有一个像这样的按钮设置：

          <div class="col-lg-3 col-sm-6">
            <div class="input-group">
              <label class="input-group-addon">Restart On Failiure?</label>
              <div class="btn-group" ng-model="server.shouldRestart" bs-radio-group>
                <label class="btn btn-default btn-disable"
                       ng-disabled="srvrManagement.edittingServer !== server._id || srvrManagement.edittingItem !== 'settings'">
                  <input type="radio" class="btn btn-default" value="true">Yes</label>
                <label class="btn btn-default"
                       ng-disabled="srvrManagement.edittingServer !== server._id || srvrManagement.edittingItem !== 'settings'">
                  <input type="radio" class="btn btn-default btn-disable" value="false">No</label>
              </div><!--btn group-->
            </div><!--input group-->
          </div><!--/.col-sm-6-->

和CSS设置如下：

.btn-disable[disabled] {
   cursor: not-allowed;
   background-color: #EEEEEE;
 }

按钮被禁用，我可以在Chrome开发工具中看到正在应用.btn-disable，但光标不会更改为不允许的光标。

Answer 1

尝试使用:disabled是另一种选择，但如果你的按钮有类＆＃34; btn-disabled＆＃34;它可能仍然启用

.btn-disable:disabled {
   cursor: not-allowed;
   background-color: #EEEEEE;
 }

JSFiddle

Answer 2

编辑：此问题比简单的游标问题更深入。通过添加指针事件：all！important;您的按钮将不再被禁用，用户可以单击它，但如果没有它，您将无法更改光标。

这将需要一个自定义onClick处理程序来实现按钮的所需结果，该按钮在悬停时使用自定义光标禁用。这可以用角度来完成：

          <div class="col-lg-3 col-sm-6">
            <div class="input-group">
              <label class="input-group-addon">Restart On Failiure?</label>
              <div class="btn-group" ng-model="shouldRestart"
                   ng-init="shouldRestart=server.btn.restartOnFailure.get()"
                   ng-change="shouldRestart=server.btn.restartOnFailure.get()"
                   bs-radio-group>
                <label class="btn btn-default"
                       ng-style="server.btn.restartOnFailure.style()">
                  <input type="radio" class="btn btn-default"
                         ng-change="shouldRestart=server.btn.restartOnFailure.onClick(shouldRestart)"
                         value="true">Yes</label>
                <label class="btn btn-default"
                       ng-click=""
                       ng-style="server.btn.restartOnFailure.style()">
                  <input type="radio" class="btn btn-default"
                         ng-change="shouldRestart=server.btn.restartOnFailure.onClick(shouldRestart)"
                         value="false">No</label>
              </div><!--btn group-->
            </div><!--input group-->
          </div><!--/.col-sm-6-->

在控制器内部

    restartOnFailure: {
      get: function() {
        console.log('get');
        return server.shouldRestart;
      },
      onClick(boolean){
        console.log('onClick');
        if (!self.btns.data.isEditting || self.btns.data.edittingServer !== server._id) {
          console.log('not editing');
          return server.shouldRestart;
        }
        console.log('editing');
        return server.shouldRestart = boolean;
      },
      isDisabled(){
        return self.btns.data[srvrId].restartOnFailure.disabled;
      },
      style(){
        if (!self.btns.data.isEditting || self.btns.data.edittingServer != server._id) {
          return {
            "cursor": "not-allowed",
            "pointer-events": "none !important",
            "background-color": "#EEEEEE"
          }
        }
        return {}
      }
    }

我所做的是初始化bs-radio-group指令的模型，让它处理这对按钮的实际点击。然后我通过ng-change检测到了变化。当发生更改并且我们未处于编辑状态时，我们将模型设置回它应该处于的状态。这实现了禁用按钮的效果，而不使用disabled属性。实际上允许我们根据自己的喜好设置按钮的样式。

这里的JQuery示例：Should the HTML Anchor Tag Honor the Disabled Attribute?

我的原始答案如下：

找到它：https://github.com/twbs/bootstrap/issues/16088这显然是bootstrap的一个已知问题。

要解决此问题，您必须添加指针事件：all！important;作为bootstrap在禁用的项目上条带化指针事件。

.btn-disable[disabled] {
  cursor: not-allowed;
  pointer-events: all !important;
  background-color: #EEEEEE;
}

游标：不允许;不在Angular Fullstack + Bootstap + SASS + Angular-Bootstrap中工作

2 个答案: