JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

    self.ProgramIDs = ko.observableArray([16002, 16003, 16005, 16006, 16011]);
    
    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]);
});