Question

I have the following code set up for a list of checkboxes in jQuery mobile 1.0.1 which is producing strange behavior on android devices.

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

There may be multiple “List” divs depending on the page, but the behavior is the same. If the user presses anywhere within the label tags, everything works fine, but if they press on the checkbox icon generated by jquery mobile, it will appear checked and then immediately uncheck itself. This ONLY happens on android devices.

EDIT:

I eventually solved this by removing the checkbox icon jquery mobile adds via css and putting my own icons into the background image of the label for the checkbox. I handled toggling between checked and unchecked in the change event of the checkbox. Thanks for all the suggestions.

Answer 1

See my edit for what I did. Here is the code.

In CSS to remove JQMs checkbox icons:

#container label .ui-icon
{
    display:none!important;
}

Then the classes for my custom made check and unchecked icons:

.checkon{background-image:url("images/check.png"); background-repeat:no-repeat;}
.checkoff{background-image:url("images/uncheck.png"); background-repeat:no-repeat;}

Then I edited my label tags to include these classes:

<label class="checkoff" for="1" data-theme="a">

And bound the toggling on/off to the inputs change event:

$("#container input").live("change", function (event) {
            $(this).next().toggleClass("checkoff");
            $(this).next().toggleClass("checkon");
        });

This is an ugly workaround, I know, but I could not figure out the source problem and it works for now at least.