0

我设法在 JQuery 中为我的复选框设置样式，因为我希望它们看起来：

var content = '<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">' +
    '<div class="ui-controlgroup-controls">' +
    '<div class="ui-checkbox">' +
    '<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">' +
    '<label for="checkbox-1a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-checkbox-on ui-btn-up-c">' +
    '<span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Food</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">&nbsp;</span></span></label></div>' +
    '<div class="ui-checkbox">' +
    '<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">' +
    '<label for="checkbox-4a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last">' +
    '<span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Sun Chips</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label></div>' +
    '</div></fieldset>';

结果是静态的（单击按钮时没有操作或状态更改）。

如何让它们充当普通复选框，单击时更改其选中状态？

谢谢！

4

2 回答 2

1

我想您将 html 字符串附加到具有 id 的 divmyCheckBoxes

例如：<div id="myCheckBoxes"></div>

尝试如下

$('#myCheckBoxes').html(content);
$('#myCheckBoxes').trigger("create");
于 2013-03-01T06:08:50.177 回答
0

jQuery Mobile 不仅是样式元素，还添加了一些事件处理和类/属性切换（与 JUI 类似，但您在标签中有 JQM）。因此，您要么需要自己添加此行为，要么在 JQM 开始解析之前插入标准元素，或者插入标准元素并让 JQM 再次解析它们。

要使 JQM 重新呈现移动页面标记，您需要调用如下内容：

$jqueryElement.trigger("create");

例如在哪里$jqueryElement：

$jqueryElement = $('#elementId');

编辑：换句话说，你不应该使用像ui-checkbox. 您应该添加一个带有标签和字段集的简单输入，如下所示：

<fieldset data-role="controlgroup" data-type="vertical">
    <input id="foo1" name="foo" type="checkbox"><label for="foo1">Option 1</label>`
    <input id="foo2" name="foo" type="checkbox"><label for="foo2">Option 2</label>`
</fieldset>
于 2013-03-01T00:49:16.623 回答