簡體   English   中英

Jquery mobile - 使用pageinit刷新復選框

[英]Jquery mobile - Refreshing checkboxes with 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語句,則復選框選中的值的計算結果為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>

檢查此代碼

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


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


                });

我寫了一個相當全面的小部件列表以及刷新它們的方法: http//andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-和輸入字段

也許這會回答你的問題?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM