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

【问题标题】：Disable unchecking when a checkbox is checked in AngularJS在AngularJS中选中复选框时禁用取消选中
【发布时间】：2017-11-13 15:48:22
【问题描述】：

我是一个初学者，想玩一些 javascript 来学习/理解它在做什么。我在 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);
  });
};
});

【问题讨论】：

所以你想在选中复选框时禁用它？
是的，这就是我想要达到的目标。
尝试更改跨度>
感谢 Sangwin，那一小段代码完成了这项工作！
很高兴我能帮上忙 :)

标签： javascript html angularjs checkbox

【解决方案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">

【讨论】：

为什么不能使用ng-click？
你可以，但这是他的代码，我不想做太多的改变，因为他一定已经考虑过了。
已确认，此解决方案适用于 Angular 2+ 版本。谢谢桑温！
很高兴能为您提供帮助。快乐编码！

【解决方案2】：

这是问题的代码。

   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>

【讨论】：

【解决方案3】：

像这样使用ngDisableddirective：

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

【讨论】：