Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable content based on checkbox in 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.

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

Here is the relevant section of the 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.

like image 633
Nick Avatar asked Jan 23 '14 19:01

Nick


1 Answers

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.

like image 157
Nick Avatar answered Nov 02 '22 21:11

Nick