Jquery mobile - 使用pageinit刷新複選框

我正在使用另一個頁面上的鏈接列表調用一個頁面（請參閱下面的代碼）。像這樣的列表Jquery mobile - 使用pageinit刷新複選框

<ul data-role="listview" data-theme="g"> 
     <li><a href="test.html">test</a></li> 
</ul>

下面的代碼是test.html頁面。

我在這些頁面上使用jquery mobile。只有前3個複選框後面的複選框似乎在頁面加載時通過單擊鏈接正確刷新（顯示爲選中狀態）。前三個複選框總是顯示爲未選中狀態，其檢查值設置爲false。不尋常的是，如果我在將複選框設置爲true的語句後面放置if語句，則複選框checked值將爲true，但在呈現的頁面上顯示爲false，並查看元素區域中的選中值的網絡檢查員。刷新頁面（使用F5或地址欄附近的刷新按鈕）時，複選框按照您的預期進行刷新。任何幫助將不勝感激。雖然下面的示例代碼似乎只是將所有複選框設置爲一個選中的值，但我確實（在我的真實頁面中）根據記錄集中的數據設置了它們的值，所以我不能只將質量設置爲true並刷新。我必須遍歷記錄集並相應地設置複選框值。下面的代碼只是我所遇到的錯誤的簡單再現。謝謝！

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Checkbox</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> 
      <link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" /> 
      <script src="jqm/jquery-1.7.1.min.js"></script> 
      <script src="jqm/jquery.mobile-1.0.1.min.js"></script> 

     </head> 
     <body> 
     <div id="loadCB" data-role="page"> 
      <script type="text/javascript"> 
       $("#loadCB").live('pageinit', function() { 
        // do something here... 


        for (i=0;i<=5;i++) 
        { 
        $("#checkbox-"+i).prop("checked", true); 
        $("#checkbox-"+i).prop("checked", true).checkboxradio("refresh"); 
        } 


       }); 
      </script> 

      <article data-role="content"> 


       <form id="frmR"> 
        <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/> 
        <label for="checkbox-0">checkbox-0</label> 
        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/> 
        <label for="checkbox-1">checkbox-1</label> 
        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/> 
        <label for="checkbox-2">checkbox-2</label> 
        <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/> 
        <label for="checkbox-3">checkbox-3</label> 
        <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/> 
        <label for="checkbox-4">checkbox-4</label> 
        <input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/> 
        <label for="checkbox-5">checkbox-5</label> 

        <input type="submit" value="Set Rules" /> 
       </form>    


      </article>   
     </body> 
    </div> 
    </html>

來源

2012-02-20 Paul in Colorado

我寫的微件的相當全面的列表，並通過刷新它們的方法： http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields

也許這會回答你的問題？

來源

2012-02-20 17:17:07 commadelimited

感謝您的答覆。看起來我已經使用了類似的代碼，就像你在頁面上顯示的那樣。當從其他頁面加載頁面時，我的複選框似乎無法正確刷新。 – 2012-02-22 03:17:48

檢查這個代碼

$("#loadCB").live('pageinit', function() { 
        // do something here... 


        $("input[type='checkbox']").attr("checked",false).checkboxradio("refresh"); 


       });

來源

2012-02-23 05:38:57 Hkachhia

Harry，感謝您的反饋。雖然這將設置所有複選框進行檢查，但它不能解決我提供的示例中的問題。我基於從數據庫返回的記錄集來設置複選框值，因此我無法將所有值設置爲true。我必須遍歷記錄，並只設置應檢查的複選框。我的問題是，前三個複選框似乎永遠不會正確刷新。謝謝。 – 2012-02-26 04:12:31

Jquery mobile - 使用pageinit刷新複選框

回答

相關問題