禁用在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); 
    }); 
}; 
});

來源

2017-06-12 rv.86

所以，你想，當它被選中禁用複選框？ –

是的，這就是我想要達到的。 –

嘗試更改 –

將工作肯定..嘗試改變：

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

來源

2017-06-12 08:42:43

爲什麼你不能使用'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>

來源

2017-06-12 08:43:27

感謝您的回答。這一個工作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>

來源

2017-06-12 08:44:37

禁用在AngularJS中選中複選框時取消選中

回答

相關問題