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

这可以防止点击页面并提供“禁用”部分的良好视觉指示。它并不妨碍我通过控件进行跳转，但它可以用于我的目的。

如何根据AngularJS / Bootstrap3中的复选框禁用内容

1 个答案: