jQuery Mobile复选框取消选中自身

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>

根据页面的不同，可能会有多个“列表” div，但是行为是相同的。 如果用户按下标签标签中的任意位置，一切正常，但是如果按下由jquery mobile生成的复选框图标，它将显示为选中状态，然后立即取消选中其自身。 这仅发生在android设备上。

编辑：

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

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

我知道这是一个丑陋的解决方法，但是我无法弄清楚源问题，并且至少目前可以使用。