jQuery Mobile checkbox unchecks itself

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.

Also, your IDs are not valid HTML identifiers, more info here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Jasper, Apr 17 '12 at 22:20
Its version 1.0.1. The IDs are actually more like "Team-1-Player-1". I shortened them for this post. I will edit it, thanks. — Ross, Apr 17 '12 at 22:24
Is it possible to replicate this behavior in a jsfiddle? I've started one here http://jsfiddle.net/NKDuB/ but I can't reproduce the problem. — Trent, Apr 18 '12 at 02:06

score 0 · Answer 1 · answered Apr 18 '12 at 07:22

0

Do you have tried version 1.1.0? I think this version works a lot better on android. Maybe the problem solves itself

answered Apr 18 '12 at 07:22

Flow

402
6
16

I did but it did not work. I made a workaround which I edited into my post. Thanks though. – Ross Apr 18 '12 at 23:05

score 0 · Accepted Answer · answered Apr 18 '12 at 23:13

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.

jQuery Mobile checkbox unchecks itself

2 Answers2