JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<button data-bind="click: selectQuote">select quote</button>
<div data-bind="with: QuoteSelectedViewModel">
<!-- ko foreach: CoverQuotesViewModel -->
<br/>
<input type="checkbox" data-bind="checked: IsSelected"></input>
<input type="button" data-bind="value: Label, enable: IsSelected"></input>
<!-- /ko -->
</div>
<div data-bind="text: ko.toJSON(viewModel)"></div>
JavaScript
var originalData = {
"QuoteSelectedViewModel": {
"CoverQuotesViewModel": []
}
}
var viewModel = ko.mapping.fromJS(originalData);
viewModel.QuoteSelectedViewModel = ko.observable();
viewModel.selectQuote = function(){
viewModel.QuoteSelectedViewModel( {
"CoverQuotesViewModel": [ {
"Label": "Première Assistance 24h/24 (GRATUITE)",
"IsSelected": ko.observable(false)
},
{
"Label": "Assistance PLUS 24h/24",
"IsSelected": ko.observable(true )
}]
} );
}
ko.applyBindings(viewModel);