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

Question

我有一组单选按钮,都是用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");

Answer 1

您需要refresh在更改基础状态后调用该方法:

刷新按钮的视觉状态.在以编程方式更改本机元素的已检查或禁用状态后更新按钮状态非常有用.

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

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

它使用无线电的ID,但只要你得到一个包含相关input[type=radio]元素的jQuery实例就无所谓了.

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