jQuery UI單選按鈕 - 如何正確切換選中狀態

我有一組單選按鈕，所有樣式都使用jQuery UI的.button()。jQuery UI單選按鈕 - 如何正確切換選中狀態

我想改變他們的選中狀態。然而，當我這樣做編程方式在容器的改變事件有：

$("#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");

來源

2010-09-21 Antony Carthy

安東尼，我嘗試過了，按鈕（「使能」）不適合工作我。不應該像* $（「selector」）。attr（'checked'，true）.button（「refresh」）; *？ – 2010-12-21 20:56:29

你需要改變底層的狀態後致電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.

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

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

使用標識的收音機，但它並不重要只要你得到一個包含相關input[type=radio]元素的jQuery實例。

來源

2010-09-21 14:43:04

工作 - 謝謝！爲什麼我需要這樣做？這是一個錯誤或在jQuery UI中的不良行爲？ – 2010-09-21 14:56:59

@Antony：好吧，當'checked'或'disabled'屬性的狀態改變時，沒有可靠的，跨瀏覽器的事件。令我驚訝的是，他們沒有使用CSS來讓瀏覽器自動處理更改，但我希望他們有一個原因（IE6支持，也許 - IE6不會對鏈接執行任何狀態選擇器）。另一個驚喜是他們沒有提供一種方法，可以用來改變'checked'狀態並一次更新UI。一旦知道，仍然很容易。 :-) – 2010-09-21 14:58:52

準確！謝謝T.J. – 2010-09-21 15:46:45

望着code，你需要切換ui-state-active類，但最簡單的方法可能只是$('someradiobutton').trigger('click')（或者，如果你不想讓你的自定義事件處理程序的運行， $('someradiobutton').trigger('click.button')）。

來源

2010-09-21 10:25:15 Tgr

更改底層單選按鈕的狀態，但仍然不是UI的樣式... – 2010-09-21 14:39:12

-1：這不會與「jQuery UI按鈕」（這是問題的關鍵），因爲他們創建單獨的元素沒有連接到原始無線電按鈕。你需要在改變按鈕狀態後調用'button（「refresh」）'（最好用'prop（'checked'，boolvalue）'） – 2014-07-09 08:01:30

儘管有相反的帖子，您可以通過ID引用單選按鈕。不知道爲什麼JQuery用戶界面不會自動刷新按鈕選中時，但你不喜歡這樣寫道：

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

來源

2011-05-03 03:01:28

我唯一的補充是使用'prop'而不是'attr'，從而使它成爲$ （ '選擇'）。支撐（「檢查」，真）.button（「刷新」）。 – MickJ 2013-03-25 19:51:24

當我嘗試此修復程序時，出現以下錯誤 - 未捕獲的錯誤：無法在初始化之前調用按鈕上的方法;試圖調用方法'刷新' 有誰知道可能會導致這種情況？ – Blake 2013-05-28 18:25:37

將重置所有單選按鈕，但你可以得到更具體與選擇器。

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

來源

2012-03-06 16:22:28 Mike

-1：這不適用於'jQuery UI按鈕'（問題的關鍵），因爲它們創建了未連接到原始單選按鈕的單獨元素。你需要在改變按鈕狀態（最好用'prop（'checked'，boolvalue）'）調用'button（「refresh」）''） – 2014-07-09 08:01:08

我用setTimeout完全重置Buttonset來解決它。

將單擊事件添加到需要確認的單選按鈕。
請注意下面的代碼中點擊 '單選按鈕' 和完成 'radioSet'：

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

創建一個方便的功能是重置您的Buttonset：

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

來源

2013-11-08 08:42:23

-1

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

這就是所有。

來源

2013-12-28 19:44:58 Swen

-1：這不適用於'jQuery UI按鈕'是關於），因爲他們創建不連接到原始單選按鈕的單獨元素。你需要在改變按鈕狀態（最好用'prop（'checked'，boolvalue'）'）調用'button（「refresh」）'） – 2014-07-09 08:03:54

如果有人仍然得到此問題，請使用：

.prop('checked',true);

代替：

.attr("checked", true);

來源

2016-01-12 19:45:13 Mohit

jQuery UI單選按鈕 - 如何正確切換選中狀態

回答

相關問題