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