复选框不显示bootstrap和knockoutjs绑定

Question

由于某些原因，我的挖空绑定标签

旁边没有复选框

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

查看模型如下：

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

请看这里的小提琴： http://jsfiddle.net/2j9tgjr9/

修改 感谢大家解决所有我在标签内输入的原因是因为它在bootstrap示例中说明了这一点。

Answer 1

您不应将def setUp(self)标记放在input标记中。 尝试：

label

由于您使用<label class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]"/> <input id="1" type="checkbox" /> checkbox-inline，它将装饰内联部分。

此外，如果您希望Bootstrap与亲戚input相关联，您可以使用label属性获取相关的输入ID：

for

Answer 2

我建议你这样做。

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不应位于label代码中。

试试这个：

<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