jQuery UI 单选按钮 - 如何正确切换选中状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3759088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI radio button - how to correctly switch checked state
提问by Antony Carthy
I have a set of radio buttons, all styled with jQuery UI's .button().
我有一组单选按钮，所有样式都使用 jQuery UI 的.button().
I want to change their checked state. However, when I do so programatically on the container's change event with:
我想改变他们的检查状态。但是，当我以编程方式对容器的更改事件执行此操作时：
$("#myradio [value=1]").attr("checked", false);
$("#myradio [value=2]").attr("checked", true);
The values are changed correctly, but the UI styling still shows the unchecked radio button with the checked style, and the checked one still looks unchecked.
值已正确更改，但 UI 样式仍显示带有选中样式的未选中单选按钮，选中的单选按钮仍然看起来未选中。
I looked through the jQuery UI documentation on the button()method for radio buttons, but there is nothing about how to change the state and update the UI styling.
我查看了button()关于单选按钮方法的 jQuery UI 文档，但没有关于如何更改状态和更新 UI 样式的内容。
The nutshell of the problem is that calling the $("selector").button("disable");code does not change the button's active state - the underlying radio button is correctly checked, but the UI active state does not change. So, I get a greyed out button that looks like it's still checked, and the real selected button appears unchecked.
问题的核心是调用$("selector").button("disable");代码不会改变按钮的活动状态——底层单选按钮被正确检查，但 UI 活动状态不会改变。所以，我得到一个灰色的按钮，看起来它仍然被选中，而真正被选中的按钮似乎没有被选中。
Solution
解决方案
$("selector").button("enable").button("refresh");
回答by T.J. Crowder
You need to call the refreshmethod after changing the underlying state:
您需要refresh在更改底层状态后调用该方法：
Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.
刷新按钮的视觉状态。在以编程方式更改本机元素的选中或禁用状态后更新按钮状态很有用。
Working example: http://jsbin.com/udowo3
工作示例：http: //jsbin.com/udowo3
function setRadio(id) {
var radio = $('#' + id);
radio[0].checked = true;
radio.button("refresh");
}
That uses IDs for the radios, but it doesn't matter as long as you get a jQuery instance containing the relevant input[type=radio]element.
这对收音机使用 ID，但只要您获得一个包含相关input[type=radio]元素的 jQuery 实例，这并不重要。
回答by Salah B
Despite posts to the contrary, you CAN reference a radio button by ID. Not sure why JQuery UI doesn't refresh the buttons automatically when checked, but you do it like this:
尽管有相反的帖子，您可以通过 ID 引用单选按钮。不知道为什么 JQuery UI 在选中时不会自动刷新按钮，但你这样做：
$('selector').attr('checked','checked').button("refresh");
Working example:
工作示例：
<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>
回答by Mike
Will reset all radio buttons but you can get more specific with the selector.
将重置所有单选按钮，但您可以通过选择器获得更具体的信息。
$( 'input:radio' )
.removeAttr('checked')
.removeAttr('selected')
.button("refresh");
回答by Tgr
Looking at the code, you need to toggle the ui-state-activeclass, but the simplest way is probably just $('someradiobutton').trigger('click')(or if you don't want your custom event handlers to run, $('someradiobutton').trigger('click.button')).
查看代码，您需要切换ui-state-active类，但最简单的方法可能只是$('someradiobutton').trigger('click')（或者如果您不想运行自定义事件处理程序，$('someradiobutton').trigger('click.button')）。
回答by John
If someone is still getting this issue, make use of:
如果有人仍然遇到此问题，请使用：
.prop('checked',true);
instead of:
代替：
.attr("checked", true);
回答by Stefan Brinkmann
I solved it by completely resetting the Buttonset with setTimeout.
我通过使用 setTimeout 完全重置 Buttonset 来解决它。
Add a click Event to the Radio Button that needs Confirmation.
Please note the clicked 'radioButton' and the complete 'radioSet' in the Code below:
向需要确认的单选按钮添加单击事件。
请注意以下代码中单击的“radioButton”和完整的“radioSet”：
$('#radioButton').click(function(){
if(confirm('Confirm Text') != true){
resetButtonset('#radioSet', 200);
return false;
};
});
Create a handy Function that resets your Buttonset:
创建一个方便的函数来重置你的按钮组：
function resetButtonset(name, time){
setTimeout(function(){$(name).buttonset();}, time);
}
回答by Swen
$('input:radio[name="radioname"] + label[for="eglabel"]').click();
Thats all.
就这样。
