自动勾选或使用淘汰赛

Question

所以我试图做任何的两件事情禁用它：

1）当所有三个框（付款，捡起并返回），我想第四个（完成）自动检查。

OR

2）我想第四盒（完成）被禁用，直到所有其他复选框被选中。

我找不出任何一个使用击倒js。这里是我的代码：

<div class="center"> 
    <h2> Grad Apparels </h2> 
    <table> 
     <thead> 
      <tr> 
       <th></th> 
       <th> ID Number </th> 
       <th> Full Name </th> 
       <th> Payments </th> 
       <th> Picked Up </th> 
       <th> Returned </th> 
       <th> Completed </th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: apparels"> 
      <tr> 
       <td data-bind="text: ($index() + 1)"> </td> 
       <th data-bind="text: id"></th> 
       <th data-bind="text: name"></th> 
       <th> <input type="checkbox"> </th> 
       <th> <input type="checkbox"> </th> 
       <th> <input type="checkbox"> </th> 
       <th> <input type="checkbox"> </th> 
       <td> <a href="#" data-bind="click: $parent.remove">Remove</a></td> 
      </tr> 
     </tbody> 
    </table> 
    <br> 
    <p> ID: <input data-bind="value: id"> </p> 

    <p> Full Name: <input data-bind="value: name"></p> 
    <button data-bind="click: add">ADD</button> 
</div> 

的JavaScript：

function apparel(id, name){ 
    var self = this; 
    self.id = ko.observable(id); 
    self.name = ko.observable(name); 
}; 

function viewModel(){ 
    var self = this; 
    self.id = ko.observable(''); 
    self.name = ko.observable(''); 
    self.apparels = ko.observableArray([ 
     new apparel(915486876, 'Shajia'), 
     new apparel(915123456, 'John Doe'), 
     new apparel(948037466, 'Katherine'), 
     new apparel(958480376, 'Samuel'), 
     new apparel(984803976, 'Jane Doe') 
    ]); 

this.add = function(){ 
    self.apparels.push(new apparel(self.id(), self.name())) 
} 

this.remove = function(){ 
    self.apparels.remove(this) 
} 

} 

ko.applyBindings(new viewModel()); 

Answer 1

你可以添加三个观测（payments，pickedUp和returned）和计算机（allChecked）的apparel对象：

function apparel(id, name){ 
     var self = this; 

     self.id = ko.observable(id); 
     self.name = ko.observable(name); 

     self.payments = ko.observable(); 
     self.pickedUp = ko.observable(); 
     self.returned = ko.observable(); 

     self.allChecked = ko.computed(function() {  
      return self.ch1() && self.ch2() && self.ch3(); 
     }); 
    };  

然后在您的表格中使用它们：

<div class="center"> 
     <h2> Grad Apparels </h2> 
     <table> 
      <thead> 
       <tr> 
        <th></th> 
        <th> ID Number </th> 
        <th> Full Name </th> 
        <th> Payments </th> 
        <th> Picked Up </th> 
        <th> Returned </th> 
        <th> Completed </th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: apparels"> 
       <tr> 
        <td data-bind="text: ($index() + 1)"> </td> 
        <th data-bind="text: id"></th> 
        <th data-bind="text: name"></th> 

        <th> <input type="checkbox" data-bind="checked: payments"></th> 
        <th> <input type="checkbox" data-bind="checked: pickedUp"></th> 
        <th> <input type="checkbox" data-bind="checked: returned"></th> 
        <th> <input type="checkbox" disabled data-bind="checked: allChecked "> </th> 
        <td> <a href="#" data-bind="click: $parent.remove">Remove</a></td> 
       </tr> 
      </tbody> 
     </table> 
     <br> 
     <p> ID: <input data-bind="value: id"> </p> 

     <p> Full Name: <input data-bind="value: name"></p> 
     <button data-bind="click: add">ADD</button> 
    </div>