jQuery UI Button on checkbox will not work if quickly clicked multiple times
<p>I have a page setup with some checkboxes, that UI.button applied to them. They each have a onclick event, that calls a function that will display a tab (if checked) or remove a tab (if unchecked).</p>

<p>The problem is, if you click them quickly, you can end up with a tab displaying, and the checkbox showing as unchecked, or vice-versa.</p>

<p>I've tried removing the onclick event, making it a dblclick event as well, and also disabling the checkbox via attr() and .button('option', 'disabled', true) with no luck in it solving the issue.</p>

<p>My relevant code is below:</p>

<p>PHP that creates the checkboxes:</p>

<pre><code>$output .= '&lt;input onclick="toggleTab(\'' . $group['_id'] . '\', this);" type="checkbox" name="groups" value="'.$group['_id'].'" id="groups_'.$group['_id'].'" /&gt;&lt;label id="l_'.$group['_id'].'" for="groups_'.$group['_id'].'"&gt;'.$group['name'].'&lt;/label&gt;';
</code></pre>

<p>javascript function called on click:</p>

<pre><code>function toggleTab (id, elem) {
if ($(elem).is(':checked')) {
    $('#tab_' + id ).show();
} else {
    var currentTab = $('#tabPricing .ui-tabs-panel:not(.ui-tabs-hide)');
    tab = currentTab.prop("id");
    if (tab == 'tab' + id) {
    $('#tabPricing .innerTabs').tabs('select', 'tabDefault');
    }
    $('#tab_' + id ).hide();
}
</code></pre>

<p>}</p>

<p>I know it's likely a JavaScript problem in general, I just can't seem to find a good way around it.</p>
