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

I am creating a form where the user can configure a recurring event, so there are a large number of controls. At the top is a checkbox to enable/disable the schedule.

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

How can I disable, but not hide, the entire section based on the checkbox? If it is checked, the user should be able to make modifications to the schedule. If it is not checked, no changes should be allowed.

如何根据复选框禁用但不隐藏整个部分？如果选中，则用户应该能够对计划进行修改。如果未选中，则不应允许更改。

I'm fairly certain I can use the ng-disabled directive on each control, but I'd like to set some attribute/class on the entire container, rather than on each individual control.

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

I am using Bootstrap 3, so if there is a class that would provide this functionality, that would be an acceptable solution as well.

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

Here is the relevant section of the HTML:

以下是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>

I have tried:

我努力了：

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

It didn't work, and based on the docs, it doesn't look like it is even supposed to, as its intended use is for disabling form controls. I also tried without the !, just to validate that it wouldn't work either.

它不起作用，并且基于文档，它看起来甚至不应该，因为它的预期用途是禁用表单控件。我也试过没有！，只是为了验证它也不起作用。

1 个解决方案

#1

OK, I found a technique that works for my purposes...

好的，我发现了一种适用于我的目的的技术......

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

and

和

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

This prevents clicks on the page and gives a nice visual indication of the section being "disabled". It does not prevent me from tabbing through the controls, but it works OK for my purposes.

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

#1