angularjs - 如何在 AngularJS/Bootstrap3 中禁用基于复选框的内容

Question

我正在创建一个表单，用户可以在其中配置重复事件，因此有大量控件。顶部是一个用于启用/禁用计划的复选框。

如何禁用但不隐藏基于复选框的整个部分？如果选中，用户应该能够对时间表进行修改。如果未选中，则不允许进行任何更改。

我相当确定我可以在每个控件上使用 ng-disabled 指令，但我想在整个容器上设置一些属性/类，而不是在每个单独的控件上。

我正在使用 Bootstrap 3，因此如果有一个类可以提供此功能，那也是一个可接受的解决方案。

以下是 HTML 的相关部分:

<input type="checkbox" ng-model="status" title="Enable/Disable Schedule" /> <b>Schedule the task to run:</b>
<div class="row"> <!-- need a way to disable this row based on the checkbox -->
    <span>Every <input type="number" ng-model="interval" /> 
         <select ng-model="frequency" 
                 ng-options="freq as freq.name for freq in frequencies"></select>
    </span> 
    <div>
        On these days:
    </div>
    <div class="btn-group" data-toggle="buttons-checkbox">
        <button type="button" 
                class="btn" 
                ng-model="day.value" 
                ng-repeat="day in days">{{day.name}}</button>
    </div>
</div>

我已经尝试过:

<div class="row" ng-disabled="!status">

它不起作用，并且根据文档，它看起来根本不应该起作用，因为它的预期用途是禁用表单控件。我也尝试过不使用 !，只是为了验证它也不起作用。

Answer 1

好的，我找到了一种适合我的目的的技术......

<div class="row" ng-class="{disabled: !status}"> <!-- added ng-class here -->

和

.disabled {
    z-index: 1000;
    background-color: lightgrey;
    opacity: 0.6;
    pointer-events: none;
}

这可以防止页面上的点击，并提供“禁用”部分的良好视觉指示。 它不会阻止我通过选项卡浏览控件，但它可以满足我的目的。