Disable unchecking when a checkbox is checked in AngularJS

Question

I'm a beginner and want to play around with some javascript to learn/understand what it's doing. I've found this basic 'todo list' script on the AngularJS website and started playing around with it. I've added a msg when you check a checkbox, but when I uncheck it, I got the same msg. Therefore the best option is that you are unable to uncheck it when it's checked. I've looked for quite some time but couldn't find the right answer. Maybe some of you know how to do it?

Thanks in advance!

Here's my code HTML:

       <div ng-controller="TodoListController as todoList">
        <span>Nog {{todoList.remaining()}} van de {{todoList.todos.length}} te gaan!</span>
        <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]-->
        <ul class="unstyled">
          <li ng-repeat="todo in todoList.todos">
            <label class="checkbox">
              <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done">
              <span class="done-{{todo.done}}">{{todo.text}}</span>
            </label>
          </li>
        </ul>
      </div> <!--einde ng-controller -->

AngularJS

angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
  {text:'Leer HTML5', done:true},
  {text:'Leer CSS3', done:true},
  {text:'Leer Javascript', done:false},
  ];


todoList.remaining = function() {
  var count = 0;
  angular.forEach(todoList.todos, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};

todoList.archive = function() {
  var oldTodos = todoList.todos;
  todoList.todos = [];
  angular.forEach(oldTodos, function(todo) {
    if (!todo.done) todoList.todos.push(todo);
  });
};
});

Answer 1

Will work for sure.. Try changing :

<input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done">

to

<input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done">

Answer 2

Here is the code for the problem.

   var app = angular.module('myApp', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 
 
 <div ng-app="myApp">
<input type="checkbox" ng-init="disable=false" ng-model="disable" ng-disabled="disable">Check once and it will be locked<br><br>
 </div>

Answer 3

Use the ngDisableddirective like :

<input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done">

View

<div ng-app="app" ng-controller="DateController as vm">
  <div>
        <span>Nog {{vm.remaining()}} van de {{vm.todos.length}} te gaan!</span>
        <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]-->
        <ul class="unstyled">
          <li ng-repeat="todo in vm.todos">
            <label class="checkbox">
              <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done">
              <span class="done-{{todo.done}}">{{todo.text}}</span>
            </label>
          </li>
        </ul>
      </div> <!--einde ng-controller -->
</div>