jQuery UI单选button – 如何正确切换选中状态

我有一组单选button,所有样式都使用jQuery UI的.button()

我想改变他们的检查状态。 但是,当我通过编程的方式对容器的更改事件进行:

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

值正确更改,但UI样式仍然显示与选中的样式的未经检查的单选button,而选中的仍然未选中。

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

问题的根本在于调用$("selector").button("disable"); 代码不会更改button的活动状态 – 底层单选button已正确选中,但UI活动状态不会更改。 所以,我得到一个灰色的button,看起来像它仍然被检查,真正选定的button出现未选中。

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

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

刷新button的视觉状态。 在本地元素的checked或disabled状态以编程方式更改之后,用于更新button状态。

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

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

这为收音机使用ID,但只要您得到一个包含相关input[type=radio]元素的jQuery实例就没有关系。

尽pipe职位相反,你可以通过ID引用一个单选button。 不知道为什么JQuery UI不检查时自动刷新button,但你这样做:

 $('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> 

看代码 ,你需要切换ui-state-active类,但最简单的方法可能只是$('someradiobutton').trigger('click') (或者如果你不想让你的自定义事件处理程序运行$('someradiobutton').trigger('click.button') )。

将重置所有单选button,但您可以使用select器更具体。

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

如果有人仍然遇到这个问题,请使用:

 .prop('checked',true); 

代替:

 .attr("checked", true); 

我用setTimeout完全重置Buttonset来解决这个问题。

将点击事件添加到需要确认的单选button。
请注意下面代码中单击的“radioButton”和完整的“radioSet”:

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

创build一个方便的函数来重置你的Buttonset:

 function resetButtonset(name, time){ setTimeout(function(){$(name).buttonset();}, time); } 
 $('input:radio[name="radioname"] + label[for="eglabel"]').click(); 

就这样。