jQuery UI 单选按钮 - 如何正确切换选中状态

Posted 2023-03-05

【中文标题】jQuery UI 单选按钮 - 如何正确切换选中状态

【英文标题】：jQuery UI radio button - how to correctly switch checked state

【发布时间】：2011-04-15 02:49:17

【问题描述】：

我有一组单选按钮，所有样式都使用 jQuery UI 的.button()。

我想更改他们的选中状态。但是，当我以编程方式对容器的更改事件执行以下操作时：

$("#myradio [value=1]").attr("checked", false);
$("#myradio [value=2]").attr("checked", true);

值已正确更改，但 UI 样式仍然显示未选中的单选按钮和选中的样式，选中的单选按钮看起来仍然未选中。

我查看了有关单选按钮 button() 方法的 jQuery UI 文档，但没有关于如何更改状态和更新 UI 样式的内容。

问题的简而言之，调用$("selector").button("disable"); 代码不会改变按钮的活动状态 - 正确检查了底层单选按钮，但 UI 活动状态没有改变。所以，我得到一个灰色的按钮，看起来它仍然处于选中状态，而真正选择的按钮显示为未选中。

解决方案

$("selector").button("enable").button("refresh");

【问题讨论】：

安东尼，我试过了，但按钮（“启用”）对我不起作用。不应该像 $("selector").attr('checked', true).button("refresh"); ？

【参考方案1】：

更改底层状态后需要调用refresh方法：

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

工作示例：http://jsbin.com/udowo3

function setRadio(id) 
    var radio = $('#' + id);
    radio[0].checked = true;
    radio.button("refresh");

这使用了无线电的 ID，但只要您获得一个包含相关 input[type=radio] 元素的 jQuery 实例，这并不重要。

【讨论】：

工作 - 谢谢！为什么我需要这样做？这是 jQuery UI 中的错误还是不良行为？

@Antony：嗯，当checked 或disabled 属性的状态发生变化时，不会引发可靠的跨浏览器事件。令我惊讶的是，他们没有使用 CSS 让浏览器自动处理更改，但我希望他们有一个理由（也许是 IE6 支持——IE6 除了链接之外什么都不做状态选择器）。另一个令人惊讶的是，它们没有提供可用于更改checked 状态并一次性更新 UI 的方法。不过，一旦你知道，就很容易了。 :-)

大家好，当我使用“刷新”调用时，我收到以下错误 - 未捕获的错误：无法在初始化之前调用按钮上的方法；试图调用方法“刷新”。你们看到这个/知道我为什么会收到这个错误吗？

我也遇到了与@Blake 和@Coder 相同的错误。原来我使用的是 jQuery Mobile 而不是 jQuery UI。我能够使用.checkboxradio("refresh") 而不是.button("refresh") 来刷新它

【参考方案2】：

尽管有相反的帖子，您可以通过 ID 引用单选按钮。不知道为什么 JQuery UI 在检查时不会自动刷新按钮，但你可以这样做：

$('selector').attr('checked','checked').button("refresh");

工作示例：

<div id = "buttons">
 <label for="b1">button1</label>
 <label for="b2">button2</label>
 <label for="b3">button3</label>

 <input type="radio" name = "groupa" id = "b1" value="b1">
 <input type="radio" name = "groupa" id = "b2" value="b2">
 <input type="radio" name = "groupa" id = "b3" value="b3">
</div>

<script>
  $('#buttons input').button();     
  $('#b3').prop('checked', true).button("refresh");
</script>

【讨论】：

我在这里唯一的补充是使用'prop'而不是'attr'，从而使其成为$('selector').prop("checked",true).button("refresh")。

当我尝试此修复时，我收到以下错误 - 未捕获错误：无法在初始化之前调用按钮上的方法；试图调用方法“刷新”有谁知道可能导致这种情况的原因吗？

【参考方案3】：

如果有人仍然遇到此问题，请使用：

.prop('checked',true);

代替：

.attr("checked", true);

【讨论】：

谢谢。即使使用按钮（“刷新”），它也不能与 attr 一起可靠地工作。道具似乎好多了。

【参考方案4】：

查看code，您需要切换ui-state-active 类，但最简单的方法可能只是$('someradiobutton').trigger('click')（或者如果您不希望运行自定义事件处理程序，$('someradiobutton').trigger('click.button')）。

【讨论】：

-1：这不适用于jQuery UI buttons（问题是关于），因为它们创建了未连接到原始单选按钮的单独元素。更改按钮状态后需要调用button("refresh")（最好是prop('checked', boolvalue)）

【参考方案5】：

将重置所有单选按钮，但您可以使用选择器获得更具体的信息。

$( 'input:radio' )
     .removeAttr('checked')
     .removeAttr('selected')
     .button("refresh");

【讨论】：

-1：这不适用于jQuery UI buttons（问题是关于），因为它们创建了未连接到原始单选按钮的单独元素。更改按钮状态后需要调用button("refresh")（最好是prop('checked', boolvalue)）

【参考方案6】：

我通过使用 setTimeout 完全重置 Buttonset 解决了这个问题。

向需要确认的单选按钮添加点击事件。 请注意以下代码中单击的“radioButton”和完整的“radioset”：

$('#radioButton').click(function()
    if(confirm('Confirm Text') != true)
       resetButtonset('#radioSet', 200);
       return false;
    ;
);

创建一个方便的函数来重置您的 Buttonset：

function resetButtonset(name, time)
    setTimeout(function()$(name).buttonset();, time);

【参考方案7】：

$('input:radio[name="radioname"] + label[for="eglabel"]').click();

仅此而已。

【讨论】：

-1：这不适用于jQuery UI buttons（问题是关于），因为它们创建了未连接到原始单选按钮的单独元素。更改按钮状态后需要调用button("refresh")（最好是prop('checked', boolvalue)）