小编Kel*_*lyS的帖子

我正在使用 jquery ui 按钮集作为一些单选按钮。据我了解，jquery ui 使标签看起来像一个按钮，而实际的收音机本身隐藏在下面。当用户单击标签时，单击会传播到下面的输入。

我正在尝试触发设置为“更改”的单选按钮上的事件。大多数时候，这都可以正常工作。单击标签，下面的单选按钮会发生变化，并且事件会触发。但是，在某些情况下，会发生标签单击（这会导致按钮看起来像是当前已选中），但单击/更改不会传播到下面的无线电输入。这使得某个选项/单选按钮看起来像是被选中，但实际上并未被选中。

其中两个场景是：

1. 在 Chrome 中，当您“选择”按钮上标签的文本时。该按钮看起来已被选中，但其下方的单选按钮尚未被单击/更改。
2. 在 IE 中，当用户右键单击打开自定义上下文菜单时，然后单击菜单而不选择菜单中的任何内容，然后单击该按钮两次。同样，该按钮看起来已被选中，但其下方的单选按钮尚未被单击/更改。

我的解决方案是观察标签上的单击事件，当发生这种情况时，检查下面是否选中了无线电，如果没有，则检查它并触发我想要在更改时触发的事件。基本上，始终强制将标签上的点击传播到输入。这适用于我上面提到的两种情况。

但是，我想知道是否有更好/更干净的方法来解决这个问题。

原始代码：

<div class="view-original-data nav-2nd-line">
    <input type="radio" id="view_current" name="view_original_data_options" value="current" checked="checked">
    <label for="view_current">Current Data</label>
    <input type="radio" id="view_original" name="view_original_data_options" value="original">
    <label for="view_original">Original Data</label>
</div>

脚本：

$viewOriginalDataButtons = $(".view-original-data")
        .buttonset()
        .on("change", my.handleOriginalDataOptionsClick);

修复对我有用的问题：

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