title: Uncheck radiobutton in jQuery mobile on clicking it
body: <p>I'm trying to make radiobuttons uncheckable, when a checked radiobutton is clicked, but i don't get it. Using jQuery 1.9.1 and jQuery Mobile 1.3.1. Already tried some examples from the previous versions, but all of them don't work. </p>
  
  <p>the following works in JSFiddle, but not when i try it my browser. </p>
  
  <p>JS:</p>
  
  <pre><code>var prev = {};
  $('input[name*=radio-choice-]').click(function(){
      if (prev &amp;&amp; prev.value == this.value) {
          $(this).prop('checked', !prev.status);
      }
      prev = {
          value: this.value,
          status: this.checked
      };
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <p></p>
  
  <pre><code>        &lt;div data-role="fieldcontain"&gt;
              &lt;fieldset id="hours" class="ui-grid-b" data-role="controlgroup"
                  data-type="horizontal"&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;div class="ui-bar ui-bar-d" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-b" id="radio-choice-1"
                              value="1"&gt; &lt;label for="radio-choice-1"&gt;1&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;div class="ui-bar ui-bar-d" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-b" id="radio-choice-2"
                              value="2"&gt; &lt;label for="radio-choice-2"&gt;2&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-c"&gt;
                      &lt;div class="ui-bar ui-bar-d" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-b" id="radio-choice-3"
                              value="3"&gt; &lt;label for="radio-choice-3"&gt;3&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;div class="ui-bar ui-bar-d" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-b" id="radio-choice-4"
                              value="4"&gt; &lt;label for="radio-choice-4"&gt;4&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;div class="ui-bar ui-bar-d" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-b" id="radio-choice-5"
                              value="5"&gt; &lt;label for="radio-choice-5"&gt;5&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-c"&gt;
                      &lt;div class="ui-bar ui-bar-d" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-b" id="radio-choice-6"
                              value="6"&gt; &lt;label for="radio-choice-6"&gt;6&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/fieldset&gt;
  
              &lt;fieldset id="minutes" class="ui-grid-b" data-role="controlgroup"
                  data-type="horizontal"&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;div class="ui-bar ui-bar-e" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-a" id="radio-choice-15"
                              value="15"&gt; &lt;label for="radio-choice-15"&gt;15&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;div class="ui-bar ui-bar-e" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-a" id="radio-choice-30"
                              value="30"&gt; &lt;label for="radio-choice-30"&gt;30&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-c"&gt;
                      &lt;div class="ui-bar ui-bar-e" style="height: 40px"&gt;
                          &lt;input type="radio" name="radio-choice-a" id="radio-choice-45"
                              value="45"&gt; &lt;label for="radio-choice-45"&gt;45&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
         &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: The Javascript works! Have to be added twice for different groups of radiobuttons (based on names). </p>
  
  <p><strong>Hint</strong> Code have to be added to
       $(document).delegate('.ui-page', 'pageshow', function () {<em>code hier</em>});
  instead of 
       $(document).ready. 
  The reason is explained  <a href="https://stackoverflow.com/questions/6455963/jquery-mobile-do-something-on-page-load">here</a></p>