KO CheckBox Binding

Data-binding options:

checked
disabled

Example:

In this example, the ViewModel is defined specifically for use with the checkbox. It has a checked property that is bound in the View. If this value changes, the widgets automatically respond. The widgets also update the ViewModel values as they modify them.

Create a ViewModel:

ViewModel Script	Copy Code
var viewModel = function () { this.check = ko.observable(true); };

Create View with Bound Controls:

View Markup	Copy Code
<h3>CheckBox</h3> <label for="checkbox1">checkbox1</label> <input id="checkbox1" type="checkbox" data-bind="wijcheckbox: {checked: check}" /> <label for="checkbox2">checkbox2</label> <input id="checkbox2" type="checkbox" data-bind="wijcheckbox: {}" /> <label for="checkbox3">checkbox3</label> <input id="checkbox3" type="checkbox" data-bind="wijcheckbox: {}" /> <label for="checkbox4">checkbox4</label> <input id="checkbox4" type="checkbox" data-bind="wijcheckbox: {}" />

View Markup

Copy Code

<h3>CheckBox</h3> 
<label for="checkbox1">checkbox1</label>
<input id="checkbox1" type="checkbox" data-bind="wijcheckbox: {checked: check}" /> 
<label for="checkbox2">checkbox2</label>
<input id="checkbox2" type="checkbox" data-bind="wijcheckbox: {}" /> 
<label for="checkbox3">checkbox3</label>
<input id="checkbox3" type="checkbox" data-bind="wijcheckbox: {}" /> 
<label for="checkbox4">checkbox4</label>
<input id="checkbox4" type="checkbox" data-bind="wijcheckbox: {}" />

Concepts

Widgets

Reference