JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<table>
<colgroup>
<col class="selection-col">
<col class="data-col">
</colgroup>
<thead>
<tr>
<th>
<input type="checkbox" id="head_check" data-bind="checked: allChecked" />
<label for="head_check">CheckAll</label>
</th>
<th>Names</th>
</tr>
</thead>
<tbody data-bind="foreach: { data: myData, as: 'person' }">
<tr>
<td>
<input type="checkbox" data-bind="checked: person.isChecked, attr: { 'id': 'name_' + person.name }, disable: person.isDisabled" />
<label data-bind="attr: { 'for': 'name_' + person.name }">Check</label>
</td>
<td data-bind="text: person.name"></td>
</tr>
</tbody>
</table>
CSS
table td{
border: 1px solid blue;
}
table th{
border: 1px solid green;
}
table{
table-layout: fixed;
text-align: left;
}
.selection-col{
width: 100px;
}
.data-col{
width: 250px;
}
JavaScript
function MyVM() {
function Person(name, isChecked, isDisabled) {
this.name = name;
this.isChecked = ko.observable(isChecked);
this.isDisabled = ko.observable(isDisabled);
};
self.myData = ko.observableArray([
new Person('Herb', false, false),
new Person('John', true, true),
new Person('Bob', false, true),
new Person('Shawn', true, false)]);
self.allChecked = ko.computed({
read: function () {
var isAllSelected = false;
$.each(self.myData(), function(i, person){
if(person.isChecked()){
isAllSelected = true;
} else {
isAllSelected = false;
return false;
}
});
return isAllSelected;
},
write: function (status) {
alert('hello from write');
$.each(self.myData(), function(i, person){
//if(!person.isDisabled()){
person.isChecked(status);
// }
});
}
});
}
ko.applyBindings(new MyVM());