JQueryMobile не устанавливает флажок в диалоге

Question

Я открываю страницу как диалог. В этом диалоговом окне флажок установлен неправильно.

Пробовал с помощью checkboxradio («создать»); но без радости.

Как мне установить флажок для правильного стиля в диалоговом окне ??

Вот jsFiddle с кодом.

Answer 1

Вам нужно поместить 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 2

Я думаю, вам нужно будет поставить флажок внутри тега формы, чтобы jQuery Mobile мог его стилизовать.

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