复选框在使用Bootstrap和Knockoutjs绑定时未显示。

Question

由于某些原因，复选框没有显示在我绑定了 knockout 的标签旁边。

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

以下是视图模型（View Model）的内容：

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

请在此处查看示例：http://jsfiddle.net/2j9tgjr9/ 编辑： 感谢大家提供的解决方案，我把输入框放在标签里是因为在 Bootstrap 示例中这样写，请看截图。

- Dizzle

Answer 1

我可以建议这样做。

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);

- Victor Luna

Answer 2

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>

小提琴

- max

Answer 3

您不应该将 input 标签放在 label 标签中。 请尝试：

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

由于您正在使用Bootstrap的checkbox-inline，它将装饰内联部分。

此外，如果您希望input与相关的label关联，可以使用for属性，该属性需要相关的输入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" />

- mehrandvd