游标：不允许；不适用于 Angular Fullstack + Bootstrap + SASS + Angular-Bootstrap

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

编辑：这个问题比简单的光标问题更深。通过添加指针事件：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 这显然是引导程序的已知问题。

要解决这个问题，你必须添加指针事件：all !important;因为引导程序在禁用项目上剥离指针事件。

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

Answer 2

尝试使用:disabled 是一种替代方法，但如果您的按钮具有“btn-disabled”类，它可能仍处于启用状态

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

JSFiddle