css - 光标 : not-allowed; not working in 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

编辑:这个问题比简单的游标问题更深层次。通过添加 pointer-events: all !important;您的按钮将不再被禁用，用户将能够单击它，但没有它您将无法更改光标。

这将需要一个自定义的 onClick 处理程序来实现按钮的预期结果，该按钮在悬停时使用自定义光标禁用。这可以像这样用 Angular 来完成:

          <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-->

在 Controller 内部

    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 正在禁用元素上的 strip 化指针事件。

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