Toggle buttons

Binding to Bootstrap toggle button.

Examples

Is toggled:

Html markup

<button class="btn btn-info" data-bind="toggle: isToggled">Toggle button</button>

Viem model

function ButtonsExampleViewModel() {
    //...

    this.isToggled = ko.observable(false);
}

Options

data-bind="toggle: value"

value

Type: boolean, should be observable

Observable value is set in true, when button is toggled, otherwise, value is set in false. This binding is two-way, if observable value changes, 'active' class will be set to element.

Radio buttons

Two-way binding to Bootstrap radio buttons. Default Knockout checked binding doesn't work with Bootstrap's buttons, so you can use this binding

Examples

A B C

Selected value:

Html markup

<div class="btn-group form-group" data-toggle="buttons" data-bind="radio: radioValue">
    <label class="btn btn-primary">
        <input type="radio" name="options" value="A" />
        A
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" value="B" />
        B
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" value="C" />
        C
    </label>
</div>

View model

function ButtonsExampleViewModel() {
    //...

    this.radioValue = ko.observable();
}

Options

data-bind="radio: value"

value

Type: string, should be observable

Observable value is set to value of chosen radiobutton. Initially, when no radio button is toggled, observable value is undefined. This binding is two-way. For correct work all radio buttons should have value attribute.

Checkbox buttons

Two-way binding to Bootstrap checkbox buttons. Default Knockout checked binding doesn't work with Bootstrap's buttons, so you can use this binding

Examples

Array value example:

A B C

Selected values:

Boolean value example:

A B

Selected values:

A value:

B value:

Html markup

<div class="btn-group form-group" data-toggle="buttons" data-bind="checkbox: checkboxArray">
    <label class="btn btn-primary">
        <input type="checkbox" value="A" />
        A
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" value="B" />
        B
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" value="C" />
        C
    </label>
</div>

<div class="btn-group form-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" data-bind="checkbox: checkboxValueA" />
        A
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" data-bind="checkbox: checkboxValueB" />
        B
    </label>
</div>

View model

function ButtonsExampleViewModel() {
    //...

    this.checkboxArray = ko.observableArray();
        
    this.checkboxValueA = ko.observable(true);
        
    this.checkboxValueB = ko.observable(false);
}

Options

data-bind="checkbox: value"

value

Type: array or boolean, should be observable

Array, contains selected values or boolean, which is set to true or false, depending of checkbox state. This binding is two-way, if array values changed, corresponding checkbox is set up, if value is deleted from array, otherwise, it is set down. For boolean case, if observable value changes, corrseponding checkbox is set up, if value is true, otherwise, it is set down.