How to disable content based on checkbox in AngularJS/Bootstrap3

Question

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.

Welcome to SO! Please edit your question to include the bits of code relevant to your question, such as the part of your form with the checkbox, the section you want disabled, and any other related code that you have tried to use to accomplish your goal. — Derek
– Derek, Commented Jan 23, 2014 at 20:03
ng-disabled is the way to go, if you do not want to add that attribute to every form element you could create a directive that disables each form element contained within it. — Jonathan Palumbo
– Jonathan Palumbo, Commented Jan 23, 2014 at 20:16

Nick · Accepted Answer · 2014-01-24 04:50:56Z

25

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.

answered Jan 24, 2014 at 4:50

Nick

5232 gold badges6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to disable content based on checkbox in AngularJS/Bootstrap3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related