Colin Colin - 5 months ago 82
AngularJS Question

How to disable entire form including ion-checkboxes

I have a form that includes several ion-checkboxes and I'd like to make it read only.

Based on this answer I added a boolean to a fieldset. It works for selects and textboxes. But ion checkboxes, while they look disabled, still fire the click event and toggle their state

<form>
<fieldset ng-disabled="myBooleanValue">
<!-- selects and textboxes are all disabled as you'd expect-->
<ion-checkbox ng-repeat="va in q.ValidAnswers | orderBy:'SortOrder'"
ng-click="vm.setAnswer(q.ID, va.AnswerID)"
ng-checked="vm.isChecked(currentAnswers, va.AnswerID)">
{{va.Text}}
</ion-checkbox>
</fieldset>
</form>

Answer

Add ng-disabled to the ion-checkbox:

<ion-checkbox ng-disabled="myBooleanValue" 
              ng-repeat="va in q.ValidAnswers | orderBy:'SortOrder'" 
              ng-click="vm.setAnswer(q.ID, va.AnswerID)" 
              ng-checked="vm.isChecked(currentAnswers, va.AnswerID)"> {{va.Text}}
</ion-checkbox>

Add ng-click="myBooleanValue || ...":

<ion-checkbox ng-disabled="myBooleanValue" 
              ng-repeat="va in q.ValidAnswers | orderBy:'SortOrder'" 
              ng-click="myBooleanValue || vm.setAnswer(q.ID, va.AnswerID)"
              ng-checked="vm.isChecked(currentAnswers, va.AnswerID)">
   {{va.Text}}
</ion-checkbox>

Fiddle: http://jsfiddle.net/1oub4yhg/2/

Reference: ng-click still fires