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>