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

问题描述：

我是一名初学者，想用一些JavaScript来学习/理解它在做什么。我在AngularJS网站上发现了这个基本的“待办事项列表”脚本，并开始玩弄它。当您选中复选框时，我添加了一个msg，但是当我取消选中它时，我收到了同样的msg。因此，最好的选择是在检查时无法取消选中它。我寻找了相当一段时间，但找不到正确的答案。也许你们有些人知道该怎么做？禁用在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); 
    }); 
}; 
});

所以，你想，当它被选中禁用复选框？ –

是的，这就是我想要达到的。 –

尝试更改 –

答

将工作肯定..尝试改变：

<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'？ –

你可以，但这是他的代码，我不想做太多的改变，因为他一定已经想到了。 –

答

这是问题的代码。

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>

感谢您的回答。这一个工作aswel！ –

答

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

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

相关推荐