web-dev-qa-db-ja.com

jQuery UIラジオボタン-チェック状態を正しく切り替える方法

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");
_
jqueryjquery-uiradio-button
47
Antony Carthy

基礎となる状態を変更した後、 refresh メソッドを呼び出す必要があります。

ボタンの視覚状態を更新します。ネイティブ要素のチェック状態または無効状態がプログラムで変更された後、ボタンの状態を更新するのに役立ちます。

動作例： http://jsbin.com/udowo

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

それはラジオにIDを使用しますが、関連するinput[type=radio]要素を含むjQueryインスタンスを取得する限り、問題ではありません。

57
T.J. Crowder

反対の投稿にもかかわらず、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>
18
Salah B

code を見て、_ui-state-active_クラスを切り替える必要がありますが、おそらく最も簡単な方法は、おそらく$('someradiobutton').trigger('click')だけです（または、カスタムイベントハンドラが必要ない場合実行するには、$('someradiobutton').trigger('click.button')）。

1
Tgr

それでもこの問題が発生する場合は、以下を利用してください。

.prop('checked',true);

の代わりに：

.attr("checked", true);
1
Mohit

すべてのラジオボタンをリセットしますが、セレクタを使用してより具体的に取得できます。

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

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);
}
0
Stefan Brinkmann