如何在淘汰赛foreach循环中呈现jQuery移动复选框？(How to render a jQuery mobile checkbox within a knockout foreach loop?)

当我在淘汰赛的foreach循环中时，我似乎在渲染标准jQuery复选框时遇到了困难。

使用这样的标准代码看起来很好：

<input type="checkbox" data-theme="c" name="checkbox-1" id="checkbox-1" class="custom" data-bind="checked: error, click: acceptChanges" /> <label for="checkbox-1">Error</label> <input type="checkbox" data-theme="c" name="checkbox-2" id="checkbox-2" class="custom" data-bind="checked: information, click: acceptChanges" /> <label for="checkbox-2">Information</label>

但是当我在foreach循环中尝试这个时，它会变得非常小！

<!-- ko foreach: selectedLogTypes --> <input type="checkbox" data-theme="c" class="custom" data-bind="jqmChecked: isSelected, attr: { 'id': 'checkbox_' + $index(), 'name': 'checkbox_' + $index() }" /> <label data-bind="text: logType, attr: { 'for': 'checkbox_' + $index() }"></label> <!-- /ko -->

这是一个展示问题的小提琴样本的链接。

http://jsfiddle.net/mheere/A33Ng/1/

任何帮助非常感谢！

I seem to be having difficulties rendering a standard jQuery checkbox when I am inside a knockout foreach loop.

It looks fine using standard code like this:

<input type="checkbox" data-theme="c" name="checkbox-1" id="checkbox-1" class="custom" data-bind="checked: error, click: acceptChanges" /> <label for="checkbox-1">Error</label> <input type="checkbox" data-theme="c" name="checkbox-2" id="checkbox-2" class="custom" data-bind="checked: information, click: acceptChanges" /> <label for="checkbox-2">Information</label>

But when I try this within a foreach loop it renders very small!

<!-- ko foreach: selectedLogTypes --> <input type="checkbox" data-theme="c" class="custom" data-bind="jqmChecked: isSelected, attr: { 'id': 'checkbox_' + $index(), 'name': 'checkbox_' + $index() }" /> <label data-bind="text: logType, attr: { 'for': 'checkbox_' + $index() }"></label> <!-- /ko -->

Here is the link to a fiddle sample demonstrating the problem.

http://jsfiddle.net/mheere/A33Ng/1/

Any help much appreciated!

最满意答案

您需要手动增强checkbox和controlgroup 。

$("[type=checkbox]").checkboxradio(); $("[data-role=controlgroup]").controlgroup();

演示

You need to enhance checkbox and controlgroup manually.

$("[type=checkbox]").checkboxradio(); $("[data-role=controlgroup]").controlgroup();

Demo

如何在淘汰赛foreach循环中呈现jQuery移动复选框？(How to render a jQuery mobile checkbox within a knockout foreach loop?)

当我在淘汰赛的foreach循环中时，我似乎在渲染标准jQuery复选框时遇到了困难。

使用这样的标准代码看起来很好：

<input type="checkbox" data-theme="c" name="checkbox-1" id="checkbox-1" class="custom" data-bind="checked: error, click: acceptChanges" /> <label for="checkbox-1">Error</label> <input type="checkbox" data-theme="c" name="checkbox-2" id="checkbox-2" class="custom" data-bind="checked: information, click: acceptChanges" /> <label for="checkbox-2">Information</label>

但是当我在foreach循环中尝试这个时，它会变得非常小！

<!-- ko foreach: selectedLogTypes --> <input type="checkbox" data-theme="c" class="custom" data-bind="jqmChecked: isSelected, attr: { 'id': 'checkbox_' + $index(), 'name': 'checkbox_' + $index() }" /> <label data-bind="text: logType, attr: { 'for': 'checkbox_' + $index() }"></label> <!-- /ko -->

这是一个展示问题的小提琴样本的链接。

http://jsfiddle.net/mheere/A33Ng/1/

任何帮助非常感谢！

I seem to be having difficulties rendering a standard jQuery checkbox when I am inside a knockout foreach loop.

It looks fine using standard code like this:

<input type="checkbox" data-theme="c" name="checkbox-1" id="checkbox-1" class="custom" data-bind="checked: error, click: acceptChanges" /> <label for="checkbox-1">Error</label> <input type="checkbox" data-theme="c" name="checkbox-2" id="checkbox-2" class="custom" data-bind="checked: information, click: acceptChanges" /> <label for="checkbox-2">Information</label>

But when I try this within a foreach loop it renders very small!

<!-- ko foreach: selectedLogTypes --> <input type="checkbox" data-theme="c" class="custom" data-bind="jqmChecked: isSelected, attr: { 'id': 'checkbox_' + $index(), 'name': 'checkbox_' + $index() }" /> <label data-bind="text: logType, attr: { 'for': 'checkbox_' + $index() }"></label> <!-- /ko -->

Here is the link to a fiddle sample demonstrating the problem.

http://jsfiddle.net/mheere/A33Ng/1/

Any help much appreciated!

最满意答案

您需要手动增强checkbox和controlgroup 。

$("[type=checkbox]").checkboxradio(); $("[data-role=controlgroup]").controlgroup();

演示

You need to enhance checkbox and controlgroup manually.

$("[type=checkbox]").checkboxradio(); $("[data-role=controlgroup]").controlgroup();

Demo