bootstrap 和 knockoutjs 绑定不显示复选框答案

【问题标题】：Checkboxes are not displaying with bootstrap and knockoutjs bindingbootstrap 和 knockoutjs 绑定不显示复选框
【发布时间】：2016-01-24 05:16:00
【问题描述】：

由于某些原因，我的剔除绑定标签旁边没有呈现复选框

<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/

编辑： 感谢大家的解决方案，我在标签内输入的原因是因为它在引导示例中这么说，请参阅屏幕截图。

【问题讨论】：

标签： javascript html css twitter-bootstrap knockout.js

【解决方案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>

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

【讨论】：

【解决方案2】：

您不应将input 标记放在label 标记中。试试：

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

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

此外，如果您希望 input 与相对 label 相关联，您可以使用采用相关输入 id 的 for 属性：

<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" />

【讨论】：

【解决方案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

【讨论】：