在某些情况下，单击按钮标签不会触发输入单击

Question

我正在使用 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);
            }
        });

Answer 1

用标签包裹您的输入，这将解决您的问题。

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

更新：为什么这有效？让我们来看看

“label”元素不会呈现为对用户而言特殊的东西。但是，它为鼠标用户提供了可用性改进，因为如果用户单击“标签”元素内的文本，则会切换控件。

评论后编辑： jquery 论坛中存在问题，解决方案是该按钮集的刷新方法。您可以像这样使用它：

$("span.that_contains_your_radio_buttons").buttonset("refresh");

正如文档所说

刷新按钮的视觉状态。对于以编程方式更改本机元素的选中或禁用状态后更新按钮状态很有用。