如果快速单击多次，复选框上的jQuery UI按钮将不起作用

我有一个带有一些复选框的页面设置，UI.button应用于这些复选框。它们每个都有一个onclick事件，该事件调用一个函数，该函数将显示一个选项卡（如果选中）或删除选项卡（如果未选中）。

问题是，如果您快速单击它们，最终可能会显示一个选项卡，而复选框显示为未选中，反之亦然。

我已经尝试删除onclick事件，使其成为dblclick事件。此外，我还通过attr（）和.button禁用了复选框（"option"，"disabled"，true），但没有成功解决问题。

我的相关代码如下：

创建复选框的PHP：

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

单击时调用的javascript函数：

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();
}

}

我知道这可能是一个JavaScript问题，但我似乎找不到解决它的好方法。