JSFiddle - React, Tailwind, and code Playground

by Adrian D'Costa

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="programs">
    <!-- ko foreach: ProgramIDs -->    
    <input type="checkbox" data-bind="checkedValue: ProgramID, checked: $root.AllPartnerPrograms" />    <span data-bind="text: ProgramName"></span>

    <!-- /ko -->
</div>

JavaScript

var objPartnerPrograms;
vmPartnerProgramsModel = function () {
    var self = this;

    self.ProgramIDs = ko.observableArray(
    [{ProgramID: 16002,ProgramName: "Program1"}, 
     {ProgramID: 16003,ProgramName: "Program2"}, 
     {ProgramID: 16005,ProgramName: "Program3"}, 
     {ProgramID: 16006,ProgramName: "Program4"}, 
     {ProgramID: 16011,ProgramName: "Program5"
    }]);
    
    self.AllPartnerPrograms = ko.observableArray(
    [{ProgramID: 16002,"ProgramName": "Program1"}, 
     {ProgramID: 16003,ProgramName: "Program2"}, 
     {ProgramID: 16005,ProgramName: "Program3"}, 
     {ProgramID: 16006,ProgramName: "Program4"}, 
     {ProgramID: 16011,ProgramName: "Program5"}, 
     {ProgramID: 16102,ProgramName: "Program6"}, 
     {ProgramID: 16104,ProgramName: "Program7"
     }]);


};

$(document).ready(function () {
    objPartnerPrograms = new vmPartnerProgramsModel()

    ko.applyBindings(objPartnerPrograms, $("#programs")[0]);
});