如何根据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;
}

这可以防止对页面进行点击,并提供"禁用"部分的良好视觉指示.它不会阻止我通过控件进行跳转,但它可以用于我的目的.