Question

我正在使用Bootstrap 3和Angular 1.5在页面上显示单选按钮组

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" ng-click="changeAvailable(day.item[0],1)" ng-class="{1:'active'}[day.item[0].available]">
        <input type="radio" name="availabe[{{$index}}]" ng-checked="day.item[0].available==1" ng-model="day.item[0].available" ng-value="1">Workday
    </label>
    <label class="btn btn-default disabled" ng-click="changeAvailable(day.item[0],2)" ng-class="{2:'active'}[day.item[0].available]">
        <input type="radio" name="availabe[{{$index}}]" disabled="disabled" ng-checked="day.item[0].available==2" ng-model="day.item[0].available" ng-value="2">Break
    </label>
    <label class="btn btn-default" ng-click="changeAvailable(day.item[0],0)" ng-class="{0:'active'}[day.item[0].available]">
        <input type="radio" name="availabe[{{$index}}]" ng-checked="day.item[0].available==0" ng-model="day.item[0].available" ng-value="0">Dayoff
    </label>
</div>

我需要禁用一些按钮。我将class="disabled"添加到label，将disabled="disabled"添加到input。

在点击禁用按钮之前，所有内容都会查找。当前选中的按钮不再具有active样式。所以我现在无法判断哪个按钮处于活动状态。

我甚至检查过bootstrap官方网站示例，也有这个问题。

有没有人知道如何完全禁用按钮的解决方案？

感谢任何帮助。

Answer 1

你可以添加到css文件：

.disabled {  pointer-events: none; }

或直接在元素

中

<label class="btn btn-default disabled" style="pointer-events:none">

Your issue at github 也可以看看 Remove pointer-events:none from .disabled

单击禁用Bootstrap单选按钮组按钮将从当前删除活动

1 个答案: