jQuery UI radio button - how to correctly switch checked state

Question

I have a set of radio buttons, all styled with jQuery UI's .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.

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.

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.

Solution

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

Answer 1

You need to call the refresh method after changing the underlying state:

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

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.

Answer 2

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:

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

Answer 3

If someone is still getting this issue, make use of:

.prop('checked',true);

instead of:

.attr("checked", true);

Answer 4

Looking at the code, you need to toggle the ui-state-active class, 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')).

Answer 5

Will reset all radio buttons but you can get more specific with the selector.

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

Answer 6

I solved it by completely resetting the Buttonset with setTimeout.

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').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);
}

Answer 7

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

Thats all.