Disabling checkbox with one way binding

Question

I have one checkbox list. I need to disable all elements which have model value set to false initially. But because of two way binding I have a problem when I deselect one checkbox it becomes disabled. How to solve it?

<div class="item-s" ng-repeat="element in model.elements">
    <input id="element{{$index.toString()}}"
        type="checkbox"
        ng-true-value="true"
        ng-false-value="false"
        ng-model="element.value"
        ng-disabled="!element.value" />
    <label for="element{{$index.toString()}}">{{element.name}}</label>
</div>

But basically, if you can set another property in element such as element.initValue, you can set ng-disabled="!element.initValue" — Hoyen
– Hoyen, Commented Apr 14, 2015 at 20:58
@Hoyen, I know that. But creating all double fields just because of it doesn't seem like a good idea. I thought there must be something better. — bambi
– bambi, Commented Apr 14, 2015 at 21:02

SethGunnells · Accepted Answer · 2015-04-14 21:06:53Z

2

Adding :: in front of a binding expression causes it to only be evaluated once. This should get you what you need:

ng-disabled="::!element.value"

Here's Angular's docs on one-time binding.

answered Apr 14, 2015 at 21:06

SethGunnells

1,2691 gold badge12 silver badges19 bronze badges

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

Comments

Hoyen · Accepted Answer · 2015-04-14 21:13:18Z

-1

Try using ng-init:

<div id="myApp" ng-controller="MyController">
    <div class="item-s" ng-repeat="element in model.elements">
        <input id="element{{$index.toString()}}" type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="element.value" ng-init="initValue = element.value" ng-disabled="initValue==false" />
        <label for="element{{$index.toString()}}">{{element.name}}</label>
    </div>
</div>

Here is JSFiddle: http://jsfiddle.net/jz65o9tv/

answered Apr 14, 2015 at 21:13

Hoyen

2,5291 gold badge14 silver badges13 bronze badges

1 Comment

SethGunnells Over a year ago

According to Angular's documentation, you should only use ng-init with ng-repeat to alias special properties.

Collectives™ on Stack Overflow

Disabling checkbox with one way binding

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related