title: Clicking on button label doesn't trigger input click in some scenarios
body: <p>I am using jquery ui buttonset for some radio buttons.  As I understand it, jquery ui makes the label look like a button, while the actual radio itself is underneath, hidden.  And when a user clicks on the label, the click is propagated to the input underneath.</p>
  
  <p>I am trying to trigger an event on the radio button set on "change".  Most of the time, this works properly.  The label is clicked, and the radio is changed underneath and the event fires.  However, there are a couple of cases where the label click happens (which causes the button to look like it is currently selected), but the click/change does not propagate to the radio input underneath.  This makes it look like a certain option/radio is selected when it really isn't.</p>
  
  <p>Two of these scenarios are:</p>
  
  <ol>
  <li>In chrome, when you "select" the text of the label on the button.  The button looks selected, but underneath the radio has not been clicked/changed.</li>
  <li>In IE, when user right-clicks to open a custom contextMenu, then clicks off the menu without choosing anything in the menu, and then clicks on the button twice.  Again, the button looks selected, but underneath the radio has not been clicked/changed.</li>
  </ol>
  
  <p>My solution is to watch for a click event on the label, and when that happens, check to see if the radio is checked underneath, and if not then check it and trigger the event I wanted triggered on change.  Basically, to always force the propagation of the click on the label to the input.  This works in both of the scenarios I mention above.</p>
  
  <p>However, I am wondering if there is a better/cleaner way to solve this problem.</p>
  
  <p><strong>Original code:</strong>
  </p>
  
  <pre><code>&lt;div class="view-original-data nav-2nd-line"&gt;
      &lt;input type="radio" id="view_current" name="view_original_data_options" value="current" checked="checked"&gt;
      &lt;label for="view_current"&gt;Current Data&lt;/label&gt;
      &lt;input type="radio" id="view_original" name="view_original_data_options" value="original"&gt;
      &lt;label for="view_original"&gt;Original Data&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Script:</strong>
  </p>
  
  <pre><code>$viewOriginalDataButtons = $(".view-original-data")
          .buttonset()
          .on("change", my.handleOriginalDataOptionsClick);
  </code></pre>
  
  <p><strong>Fix that is working for me:</strong>
  </p>
  
  <pre><code>$viewOriginalDataButtons = $(".view-original-data")
          .buttonset();
  $(".view-original-data label")
          .on("click", function () {
              var labelId = $(this).attr('for'),
                      $buttonClicked = $('#' + labelId);
              if (!$buttonClicked.prop('checked')) {
                  $buttonClicked.prop('checked', true);
                  my.handleOriginalDataOptionsClick($buttonClicked);
              }
          });
  </code></pre>