Question

我有一个页面，其中包含几组用于设置选项的单选按钮。当单击特定的一个时，默认情况下使用单击事件处理程序选择其他人。功能完美，但按钮的视觉状态存在问题。

我正在使用jQueryUI的.buttonset（）方法来改善美感，当我以编程方式触发.click（）事件时，按钮不会在视觉上改变状态。这可能导致当前选项与屏幕上显示的内容完全不同。

用于说明问题的示例代码：

<fieldset>
    <label for="button1">Button 1</label>
    <input type="radio" id="button1" name="test" />

    <label for="button2">Button 2</label>
    <input type="radio" id="button2" name="test" />
</fieldset>

$('fieldset').buttonset();

$('#button2').click(function() {
    alert('button 2 clicked');
});

$('#button2').click();

我还设置了一个小提琴，以便您可以在行动中看到它，如果您愿意的话：http://jsfiddle.net/T5MGh/

正如您所料，警报框会在页面加载时弹出，但按钮不会像用户点击那样直观地更改。

有什么想法吗？

Answer 1

您可以单击按钮设置使用的实际标签，如下所示：

$('[for=button2]').click();

这是有效的，因为您的结构在.buttonset()之后看起来像这样：

<fieldset class="ui-buttonset">
    <label for="button1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Button 1</span></label>
    <input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible">

    <label for="button2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">Button 2</span></label>
    <input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible">
</fieldset>

它最初不起作用，因为jQuery UI如何执行它，依赖<{1}}来自click，而defult浏览器行为实际上点击了<label>来自那个。

Answer 2

似乎在更新版本的jQuery / jQuery UI中，行为已经改变，将原始代码的行为作为此问题发布到此问题的作者想要的内容（单击代码中的按钮处理都可以调用事件并直观地更改按钮。）

你也可以在引用的jsfiddle中看到它。因此，似乎这个答案仅适用于旧版本的jQuery / jQuery UI。

jQueryUI，单选按钮状态和单击事件

2 个答案: