Question

我是初学者，想要玩一些javascript来学习/理解它在做什么。我找到了这个基本的待办事项清单＆＃39; AngularJS网站上的脚本，并开始玩它。我在勾选复选框时添加了一个消息，但是当我取消选中它时，我得到了同样的消息。因此，最好的选择是在检查时无法取消选中它。我已经找了很长时间，但找不到合适的答案。也许有些人知道怎么做？

提前致谢！

这是我的代码 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

肯定会工作..尝试更改：

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

到

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

Answer 2

以下是问题的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用ngDisabled指令，如：

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

查看

<div ng-app="app" ng-controller="DateController as vm"> <div> <span>Nog {{vm.remaining()}} van de {{vm.todos.length}} te gaan!</span>  <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>  </div>

在AngularJS中选中复选框时禁用取消选中

3 个答案: