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>

Answer 3

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

Answer 4

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

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

Answer 5

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

.prop('checked',true);

而不是：

.attr("checked", true);

Answer 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);
}

Answer 7

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

多数民众赞成。

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

7 个答案: