Checkboxes are not displaying with bootstrap and knockoutjs binding

Question

For some reason checkboxes are not being rendered next to my knockout bound labels

<div id="test">
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]">
        <input id="1" type="checkbox" />
    </label>
</div>

View Model as follows:

var vm = {};
vm.repeatDayShortStr = ko.observableArray(["m","t","w","t","f","s","s"]);
ko.applyBindings(vm);

See fiddle here: http://jsfiddle.net/2j9tgjr9/

EDIT: Thanks for the solutions everyone the reason why I had the input inside the label was because it said so in the bootstrap example see the screenshot.

Answer 1

You should not put input tag in a label tag. try:

<label class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]"/>
<input id="1" type="checkbox" />

Since you're using checkbox-inline of Bootstrap it will decorate the inline part.

Also if you want the input to be associated with relative label you could use for attribute which takes the related input id:

<label for="1" class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]"/>
<input id="1" type="checkbox" />
<label for="2" class="checkbox-inline" data-bind="text: repeatDayShortStr()[2]"/>
<input id="2" type="checkbox" />

Answer 2

May I suggest doing this.

HTML

<div data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></div>

<script id="choiceTmpl" type="text/html">
        <input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" />
        <span data-bind="text: $data"></span>
</script>

JS

var vm = {
    choices: ["m","t","w","t","f","s","s"],
    selectedChoices: ko.observableArray([])
};

vm.selectedChoicesDelimited = ko.dependentObservable(function() {
    return this.selectedChoices().join(",");
}, vm);

ko.applyBindings(vm);

Answer 3

Input should not be in the label tag.

Try this:

<div id="test">
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]"></label>
    <input id="1" type="checkbox" />
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[0]"></label>
    <input id="2" type="checkbox" />
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[2]"></label>
    <input id="3" type="checkbox" />
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[3]"></label>
    <input id="4" type="checkbox" />
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[4]"></label>
    <input id="5" type="checkbox" />
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[5]"></label>
    <input id="6" type="checkbox" />
    <label class="checkbox-inline" data-bind="text: repeatDayShortStr()[6]"></label>
    <input id="7" type="checkbox" /> 
</div>

FIDDLE