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

Question

Long time reader and first time poster here, somewhat new to jQuery/jQM.

I have a form containing a Listview with a data filter, where each list item contains a checkbox. When I type into the filter box and the items are filtered, extra unstyled checkboxes appear in the background. Here is a sample of the code:

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

I initially thought the issue was with the way I was dynamically generating the list (i.e. I thought I must have been getting duplicate checkboxes, because the unstyled checkboxes corresponded to items in my list), but I was able to reproduce the problem using the simple code sample above in jsfiddle: http://jsfiddle.net/KsRb2/2/

Any help would be much appreciated. Thanks!

Answer 1

This behavior is a bug in jQM 1.4.0 alpha 2. You should update to 1.4.0 RC1 and also remove the ul and li tags because this list should only be a listview or a controlgroup, it cannot be both. This would be the final 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>

You can try it out here in a fiddle: http://jsfiddle.net/KsRb2/5/

Answer 2

jQM is creating its own styled checkbox but keeping the original INPUT element in the DOM. This gets revealed when you filter. The following CSS hides these elements:

li .ui-checkbox input{
    visibility: hidden;
}

Here is your updated fiddle: http://jsfiddle.net/ezanker/KsRb2/4/

Answer 3

Actually, you just have to add data-filter-reveal="true" to the fieldset. No need to use CSS.