It seems that hand-coded checkboxes are a bit flaky in iOS. Sometimes when they are checked, they stay checked. Sometimes, after being tapped, they just magically uncheck themselves. It is very inconsistent. I tested this about 5 times. 3 times they stayed checked. 2 times they did not stay checked. I sometimes felt it depended on whether or not I had tapped anywhere else on the screen.
See this sample GIF. After seeing they don’t stay checked, I started double tapping them. They stayed checked then.
This issue does not exist in Chrome. It is intermittent in iOS (Simulator and Actual Devices - iPhone 5S iOS 7 and iPhone 4S iOS 6).
Here is the code for this view:
<div>
<p class="kit-p">Please click to accept our usage policies.</p>
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="policies.agreedTos" ng-checked="policies.agreedTos">
</label>
Accept <a class="policies-link" ng-click="openModal('tos')">Child Safety Policy</a>
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="policies.agreedChildSafety" ng-checked="policies.agreedChildSafety">
</label>
Accept <a class="policies-link" ng-click="openModal('childSafety')">Child Safety Policy</a>
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="policies.agreedPrivacy" ng-checked="policies.agreedPrivacy">
</label>
Accept <a class="policies-link" ng-click="openModal('privacy')">Privacy Policy</a>
</li>
</ul>
<p class="kit-p">These policies are in human-friendly terms so please read them to understand how Kids in Touch will use the information you provide.</p>
</div>