Question

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

我试图在“更改”上设置的单选按钮上触发事件。大多数情况下，这是正常的。单击标签，下方更改收音机并触发事件。但是，有几种情况会发生标签点击（这会使按钮看起来像当前所选），但点击/更改不会传播到下面的无线电输入。这使它看起来像某个选项/无线电被选中，当它真的没有。

其中两种情况是：

在chrome中，当您“选择”按钮上的标签文本时。该按钮看起来已选中，但未点击/更改收音机下方。
在IE中，当用户右键单击以打开自定义contextMenu，然后单击关闭菜单而不在菜单中选择任何内容，然后单击该按钮两次。同样，按钮看起来已被选中，但未点击/更改收音机下方。

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

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

原始代码：

<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>

更新：为什么这项工作？让我们来看看

＆＃34;标签＆＃34;元素不会呈现为用户的任何特殊内容。但是，它为鼠标用户提供了可用性改进，因为如果用户点击＆＃34;标签内的文字＆＃34;元素，它切换控制。

评论后修改： 在jquery论坛中存在一个问题，解决方案是该按钮集的刷新方法。您可以使用它：

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

正如文件所说

刷新按钮的可视状态。用于更新按钮在本机元素的已检查或禁用状态更改后的状态编程。

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

1 个答案: