KO+bootstrap 模态窗全选绑定

<div id="modalAreaID01"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-bind="attr: { 'data-target': modalWindowId },click:modalWindowLoad"> Launch demo modal </button></div><script src="Content/jquery-2.1.1.min.js"></script><script src="Content/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script><link href="Content/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" /><script src="Content/knockout-3.1.0.min.js"></script><script src="Content/knockout.mapping.js"></script><script src="index.js"></script>

var buidModelWindow = function (showWindowId,dataSorce, htmlAreaID, selectAllKOAction, saveKOAction, closeKOAction) { var html = "<div class='modal fade' id='" + showWindowId + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>" + " <div class='modal-dialog'>" + " <div class='modal-content'>" + " <div class='modal-header'>" + " <button type='button' class='close' data-dismiss='modal' data-bind='click:" + closeKOAction + "'><span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span></button>" + " <h4 class='modal-title' id='myModalLabel'>Modal title</h4>" + " </div>" + " <div class='modal-body'>" + "<!"+"-- ko foreach:" + dataSorce + " -->" + "<label><input type='checkbox' data-bind='checked:Enabled' /> <span data-bind='text:Value' /></label>" + "<!-- /ko -->" + " </div>" + " <div class='modal-footer'>" + " <button type='button' class='btn btn-primary' data-bind='click:" + selectAllKOAction + "'>SelectAll</button>" + " <button type='button' class='btn btn-default' data-dismiss='modal' data-bind='click:" + closeKOAction + "'>Close</button>" + " <button type='button' class='btn btn-primary' data-bind='click:" + saveKOAction + "'>Save changes</button>" + " </div>" + " </div>" + " </div>" + "</div>" $("#" + htmlAreaID + "").append(html);}var ViewModel = function (data) { var self = this; self.modelList = ko.mapping.fromJS(data); self.modalAreaID = ko.observable("modalAreaID01"); self.modalWindowId = ko.observable("#modalWindowId01"); self.modalWindowForeachID = ko.observable("modelList"); self.isAll = ko.observable(false); self.save = ko.observable(false); var indexAndEnabled = new Array(); self.selectAll = function () { if (self.isAll() == false) { ; i < self.modelList().length; i++) { self.modelList()[i].Enabled(true); } self.isAll(true); } else { ; i < self.modelList().length; i++) { self.modelList()[i].Enabled(false); } self.isAll(false); } } self.saveKOAction = function () { self.save(true); ; i < self.modelList().length; i++) { indexAndEnabled[i] = self.modelList()[i].Enabled(); } } self.closeKOAction = function () { if (self.save() == false) { for (i in indexAndEnabled) { self.modelList()[i].Enabled(indexAndEnabled[i]); } } else { } } self.modalWindowLoad = function () { self.save(false); ; i < self.modelList().length; i++) { indexAndEnabled[i] = self.modelList()[i].Enabled(); } } buidModelWindow(self.modalWindowId().substring(), self.modalWindowForeachID(), self.modalAreaID(), "selectAll", "saveKOAction", "closeKOAction");}$(function () { var data =jQuery.parseJSON('{"KVPEList":[{"Key":null,"Value":"阿富汗","UIID":"uiid_Country_101","Enabled":false,"Pattern":"101","Percentage":-1},{"Key":null,"Value":"巴林","UIID":"uiid_Country_102","Enabled":false,"Pattern":"102","Percentage":-1},{"Key":null,"Value":"孟加拉国","UIID":"uiid_Country_103","Enabled":false,"Pattern":"103","Percentage":-1}],"Enabled":false}'); ko.applyBindings(new ViewModel(data.KVPEList));});