JQueryMobile没有在Dialog中设置Checkbox的样式

Question

我正在打开一个页面作为对话框。此对话框未正确设置复选框的样式。

尝试使用checkboxradio（“创建”）;但没有快乐。

如何在对话框中正确选中复选框？

以下是带有代码的jsFiddle。

Answer 1

我认为您必须将复选框放在表单标记内，以便让jQuery Mobile对其进行样式化。

Answer 2

您需要将checkbox放入具有正确标记的div中

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Agree to the terms:</legend>
        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
        <label for="checkbox-1">I agree</label>
    </fieldset>
</div>

示例：http://jsfiddle.net/shanabus/8xMX2/12/

根据此处文档中的示例：http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html

Answer 3

看起来这可能是一个错误。添加<form>代码有效，但您还需要为checkboxradio()创建但需要刷新：

• http://jsfiddle.net/8xMX2/11/

JS

$('#page2').live('pageshow', function(){
    $("input[type='checkbox']").checkboxradio("refresh");
});​

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <a href="#page2" data-role="button" data-rel="dialog">Open as Dialog</a>
    </div>
</div>
<div id="page2" data-role="page">
    <div data-role="header">
        <a href="#" data-rel="back">Back</a>
        <h1>Page Two</h1>
    </div>
    <div data-role="content">
        <form>
            This is a dialog Box. 
            JQM seems to be not styling the below checkbox.<br>

            <input type="checkbox" name="cb1" id="cb1" />
            <label for="cb1">A Checkbox</label>
            <br>
            A button is styled well.<br>

            <a href="#" data-role="button">Just a Button</a>
        </form>
    </div>
</div>​