KO CheckBox バインディング

データバインディングのオプション：

checked
disabled

例：

この例では、チェックボックスと組み合わせて使用する ViewModel が定義されています。このビューには、checked プロパティがバインドされています。この値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { this.check = ko.observable(true); };

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<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: {}" />

ビューのマークアップ

コードのコピー

<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: {}" />

関連トピック

参照