I have created an angular application where I have defined a table structure like this:
<tr ng-repeat="child in requirements">
{% verbatim %}
<td class="vcenter"><input type="checkbox" ng-checked="selectedCourses.indexOf(child) != -1" ng-click="toggleCheck(child)" ng-disabled="required == (planned + completed)" value=""/>
{{child.course.subject}}-{{child.course.course_no}}
</td>
<td class="vcenter">{{child.course.course_name}}</td>
{% endverbatim %}
<td class="vcenter">3</td>
</tr>
In the controller file app.js, I have defined a function that disables toggling once a certain condition is met as mentioned above.
$scope.toggleCheck = function (course) {
if (($scope.selectedCourses.indexOf(course) === -1)) {
$scope.selectedCourses.push(course);
$scope.planned += 3;
if (($scope.planned + $scope.completed) == $scope.required) {
alert('Requirement met');
}
} else {
$scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
$scope.planned -= 3;
}
$scope.getPercentage();
};
Everything is working smoothly so far and the toggles are being disabled when the condition is met. The only issue is that both checked and unchecked toggles are being disabled. How can I ensure that only the unchecked toggles get disabled while leaving the checked ones intact?