我正在创建一个表单,用户可以在其中配置重复事件,因此有大量控件。顶部是一个用于启用/禁用计划的复选框。
如何禁用但不隐藏基于复选框的整个部分?如果选中,用户应该能够对时间表进行修改。如果没有检查,则不允许进行任何更改。
我相当确定我可以在每个控件上使用 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">
它不起作用,并且根据文档,它看起来甚至不应该起作用,因为它的预期用途是禁用表单控件。我也尝试过没有!
,只是为了验证它也不起作用。
好的,我找到了一种适合我的目的的技术......
<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;
}
这可以防止点击页面并给出“禁用”部分的良好视觉指示。
它不会阻止我通过选项卡浏览控件,但它可以满足我的目的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)