title: jquerymobile - Checkboxes get automatically unchecked on some Android devices
body: <p>I'm developing an application using Phonegap and jQuery Mobile. I have a scrollable list of checkboxes nested on a scrollable sidebar. Both are implemented using iScroll.</p>
  
  <p>The application responds perfectly on iOS and Blackberry, but some Android devices have a weird behaviour. </p>
  
  <p>On a Nexus 4 the checkboxes get a double change event when tapped, effectively being checked and unchecked almost instantly.</p>
  
  <p>The HTML generated for the inner iScroll is the following:</p>
  
  <pre><code>    &lt;div id="fondoOpciones0" class="fondoOpciones" style="height: 138px;"&gt;
     &lt;div id="contenedorOpciones0" class="contenedorOpciones" style="height: 128px; overflow: hidden;"&gt;
        &lt;div id="contenedorInternoOpciones0" class="contenedorInternoOpciones" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px);"&gt;
           &lt;div name="filtroOpcion0" category=""&gt;
              &lt;div class="ui-checkbox"&gt;&lt;label for="00" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-btn-up-c"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;Option 1&lt;/span&gt;&lt;span class="ui-icon ui-icon-checkbox-on ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;input type="checkbox" name="inputfiltroOpcion0" data-mini="true" category="" id="00" value="-1" checked=""&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;div name="filtroOpcion0" category=""&gt;
              &lt;div class="ui-checkbox"&gt;&lt;label for="01" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-btn-up-c"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt; Option 2&lt;/span&gt;&lt;span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;input type="checkbox" name="inputfiltroOpcion0" data-mini="true" category="" id="01" value="10036"&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;div name="filtroOpcion0" category=""&gt;
              &lt;div class="ui-checkbox"&gt;&lt;label for="02" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-btn-up-c"&gt;&lt;span class="ui-btn-inner"&gt;&lt;span class="ui-btn-text"&gt;Option 3 &lt;/span&gt;&lt;span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/label&gt;&lt;input type="checkbox" name="inputfiltroOpcion0" data-mini="true" category="" id="02" value="10037"&gt;&lt;/div&gt;
           &lt;/div&gt;
        &lt;div style="position: absolute; z-index: 100; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none; -webkit-transition: opacity 0ms 0ms; transition: opacity 0ms 0ms; overflow: hidden; opacity: 1;"&gt;
           &lt;div style="position: absolute; z-index: 100; background-color: rgba(0, 0, 0, 0.498039); border: 1px solid rgba(255, 255, 255, 0.901961); -webkit-background-clip: padding-box; box-sizing: border-box; width: 100%; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; pointer-events: none; -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform: translate(0px, 0px) translateZ(0px); height: 11px;"&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I instantiate the iScroll for these checkboxes using the following:</p>
  
  <pre><code>new iScroll('contenedorOpciones0', {
                  vScrollBar: true, 
                  bounce:false, 
  
                  onBeforeScrollStart :function(e){
                      //Prevent the parent iScroll from scrolling when scrolling this iScroll
                      e.stopPropagation();
                      var target = e.target;
                      while (target.nodeType != 1) target = target.parentNode;
                      if (target.tagName != 'select' &amp;&amp; target.tagName != 'input' &amp;&amp; target.tagName != 'label' &amp;&amp; target.tagName != 'span')
                      {
                          e.preventDefault();
                      }
                      return false;
                  }
              })
  </code></pre>
  
  <p>Strangely when I remove the contents of the onBeforeScrollStart the problem disappears, the checkboxes are checked and not unchecked afterwards, but since the iScroll is nested on the sidebar (that has an iScroll too), this causes both iScrolls to scroll simultaneously. </p>
  
  <p>Adding only the e.stopPropagation() line, the scroll behaviour is corrected, but the checkbox double check problem appears.</p>
  
  <p>Another strange behaviour I've noticed: When not using jQuery Mobile's trigger("create") and I bind the change event to the checkbox like this:</p>
  
  <pre><code>$('body').on("change",'input:checkbox[name^="inputfiltroOpcion0"]',function(e){
            console.log("Changed!");
   }
  </code></pre>
  
  <p>The change event is fired twice. Using trigger("create") just fires it once. This only happens in this Android phone, in other Android devices, iOS and Blackberry in both situations it is fired only once.</p>
  
  <p>I don't know if anyone has faced similar behaviours or know if there are any issues with the Nexus WebView.</p>