JSFiddle - React, Tailwind, and code Playground

by Kevin Van Lierde

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 = true;
            $.each(self.myData(), function(i, person){
                if(!person.isChecked() && !person.isDisabled()){
                    isAllSelected = 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());