jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框

jQuery Mobile - Filtering a Listview of Checkboxes causes unstyled checkboxes to appear

本文关键字:复选框 样式 视图 Mobile- 过滤 列表 jQuery      更新时间:2024-04-03

这里是长期读者和首次发布者,对jQuery/jQM来说有些陌生。

我有一个表单,其中包含一个带有数据过滤器的Listview,其中每个列表项都包含一个复选框。当我在筛选框中键入并筛选项目时,背景中会出现额外的无样式复选框。以下是代码示例:

<div data-role="content">  
    <ul data-role="listview">
        <fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">                
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="228"/>   
                <label for="228">
                    Orange
                </label>
            </li>   
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="70"/>   
                <label for="70">
                    Red
                </label>
            </li>    
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="71"/>   
                <label for="71">
                    Blue
                </label>
            </li>                
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="72"/>   
                <label for="72">
                    Purple
                </label>
            </li>                  
        </fieldset>
    </ul>
</div>

我最初认为问题在于我动态生成列表的方式(即,我认为我一定得到了重复的复选框,因为未格式化的复选框对应于我列表中的项目),但我能够使用上面jsfiddle中的简单代码示例重现问题:http://jsfiddle.net/KsRb2/2/

任何帮助都将不胜感激。谢谢

此行为是jQM 1.4.0 alpha 2中的一个错误。您应该更新到1.4.0 RC1,并删除ul和li标记,因为此列表只能是listview或controlgroup,不能两者都是。这将是最终的HTML:

<div data-role="content">  
    <fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">                
        <input type="checkbox" 
            name="itemIds" 
            id="228"/>   
        <label for="228">
            Orange
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="70"/>   
        <label for="70">
            Red
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="71"/>   
        <label for="71">
            Blue
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="72"/>   
        <label for="72">
            Purple
        </label>
    </fieldset>
</div>

你可以在这里试试小提琴:http://jsfiddle.net/KsRb2/5/

jQM正在创建自己样式的复选框,但将原始INPUT元素保留在DOM中。当你进行过滤时,就会发现这一点。以下CSS隐藏了这些元素:
li .ui-checkbox input{
    visibility: hidden;
}

这是你最新的小提琴:http://jsfiddle.net/ezanker/KsRb2/4/

实际上,您只需要向字段集添加数据过滤器show="true"。无需使用CSS。