0

Androidデバイスで奇妙な動作を引き起こしているjQueryモバイル1.0.1のチェックボックスのリストに次のコードを設定しました。

    <fieldset data-role="controlgroup">
       <div id="container">
          <div id="List1">
             <input type="checkbox" name="1" id="Team-1-Player-1"  data-theme="a"/>
             <label for="1" data-theme="a">
                <span class="ui-grid-b grid">
                   <span class="ui-block-a col1">1</span>
                   <span class="ui-block-b col2">Name <span class="pos">Position</span></span>
                   <span class="ui-block-c col3">Avg</span>
                </span>   
             </label>
             <input type="checkbox" name="2" id="Team-1-Player-2"  data-theme="a"/>
             <label for="2" data-theme="a">
                <span class="ui-grid-b grid">
                   <span class="ui-block-a col1">2</span>
                   <span class="ui-block-b col2">Name <span class="pos">Position</span></span>
                   <span class="ui-block-c col3">Avg</span>
                </span>   
             </label>
          </div>
       </div>
    </fieldset>

ページによっては「リスト」のdivが複数ある場合がありますが、動作は同じです。ユーザーが label タグ内の任意の場所を押すと、すべて正常に機能しますが、jquery mobile によって生成されたチェックボックス アイコンを押すと、チェックされているように表示され、すぐにチェックが解除されます。これは、Android デバイスでのみ発生します。

編集：

最終的に、jquery mobile が css 経由で追加するチェックボックス アイコンを削除し、チェックボックスのラベルの背景画像に独自のアイコンを配置することで、これを解決しました。チェックボックスの変更イベントでチェックとチェック解除の切り替えを処理しました。すべての提案をありがとう。

4

2 に答える 2

0

バージョン 1.1.0 を試しましたか? このバージョンは、Android での動作がはるかに優れていると思います。たぶん、問題は自然に解決します

于 2012-04-18T07:22:21.770 に答える
0

私がしたことについては、私の編集を参照してください。これがコードです。

CSS で JQM チェックボックス アイコンを削除するには:

#container label .ui-icon
{
    display:none!important;
}

次に、カスタムメイドのチェックアイコンとチェックされていないアイコンのクラス:

.checkon{background-image:url("images/check.png"); background-repeat:no-repeat;}
.checkoff{background-image:url("images/uncheck.png"); background-repeat:no-repeat;}

次に、これらのクラスを含めるようにラベル タグを編集しました。

<label class="checkoff" for="1" data-theme="a">

そして、オン/オフの切り替えを入力変更イベントにバインドします。

$("#container input").live("change", function (event) {
            $(this).next().toggleClass("checkoff");
            $(this).next().toggleClass("checkon");
        });

これは醜い回避策ですが、ソースの問題を理解できず、少なくとも今のところは機能します。

于 2012-04-18T23:13:51.773 に答える