Question

我为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>

根据页面的不同，可能有多个“List”div，但行为是相同的。如果用户按下标签标签中的任何位置，一切正常，但如果他们按下jquery mobile生成的复选框图标，它将显示为已检查，然后立即取消选中。这只发生在Android设备上。

编辑：

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

Answer 1

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

Answer 2

请参阅我的编辑内容。这是代码。

在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");
        });

这是一个丑陋的解决方法，我知道，但我无法找出源问题，至少它现在起作用了。

jQuery Mobile复选框取消选中

2 个答案: