0

我为 jQuery mobile 1.0.1 中的复选框列表设置了以下代码，这在 android 设备上产生了奇怪的行为。

    <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，但行为是相同的。如果用户按下标签标签内的任何位置，一切正常，但如果他们按下 jquery mobile 生成的复选框图标，它将显示为选中，然后立即取消选中。这只发生在安卓设备上。

编辑：

我最终通过删除复选框图标 jquery mobile 通过 css 添加并将我自己的图标放入复选框标签的背景图像中解决了这个问题。我在复选框的更改事件中处理了选中和未选中之间的切换。感谢所有的建议。

4

2 回答 2

0

您是否尝试过 1.1.0 版本？我认为这个版本在 android 上效果更好。也许问题会自行解决

于 2012-04-18T07:22:21.770 回答
0

请参阅我所做的编辑。这是代码。

在 CSS 中删除 JQMs 复选框图标：

#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 回答