CODEWITHSUNDEEP
javascripthtmlangularjscheckbox
rv.86
rv.86

Reputation: 33

Disable unchecking when a checkbox is checked in AngularJS

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);
  });
};
});

Upvotes: 1

Views: 2660

Answers (3)

daan.desmedt
daan.desmedt

Reputation: 3820

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>

Upvotes: 0

Hassan Imam
Hassan Imam

Reputation: 22534

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>

Upvotes: 0

Sangwin Gawande
Sangwin Gawande

Reputation: 8166

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">

Upvotes: 4

Related Questions