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");

Amido

Antony, I tried it and the button("enable") doesn't work for me. Shouldn't be like $("selector").attr('checked', true).button("refresh"); ? – Oersted

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.

Isaacs

Worked - thank you! Why do I need to do this? Is this a bug or bad behaviour in jQuery UI? – Amido

@Antony: Well, there's no reliable, cross-browser event thrown when the state of the checked or disabled properties is changed. What surprises me is that they're not using CSS to have the browser handle the change automatically, but I expect they have a reason (IE6 support, perhaps -- IE6 doesn't do state selectors on anything but links). The other surprise was that they don't provide a method that you can use to change the checked state and update the UI all at once. Still, easy enough once you know. :-) – Isaacs

Hey guys, when I use the 'refresh' call, I get the following error - Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'refresh'. Have you guys seen this / know why I am getting this error? – Monica

I got the same error as @Monica and @Coder also. Turns out I'm using jQuery Mobile not jQuery UI. I was able to get it to refresh using .checkboxradio("refresh") instead of .button("refresh") – Thusly

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>

Lumberman

My only addition here would be to use 'prop' instead of 'attr' thereby making it $('selector').prop("checked",true).button("refresh"). – Earleanearleen

When I try this fix, I get the following error - Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'refresh' Does anyone know what could cause this? – Monica

Answer 3

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

.prop('checked',true);

instead of:

.attr("checked", true);

Gneiss

Thank you. Even with button("refresh"), it didn't work reliably with attr. prop seems much better. – Smacker

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

Compose

-1: This will not work with jQuery UI buttons (which the question is about) as they create separate elements not connected to the original radio button. You need to call button("refresh") after changing the button state (preferably with prop('checked', boolvalue)) – Knur

Answer 5

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

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

Farnsworth

-1: This will not work with jQuery UI buttons (which the question is about) as they create separate elements not connected to the original radio button. You need to call button("refresh") after changing the button state (preferably with prop('checked', boolvalue)) – Knur

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

Cervelat

Answer 7

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

Thats all.

Piercing

-1: This will not work with jQuery UI buttons (which the question is about) as they create separate elements not connected to the original radio button. You need to call button("refresh") after changing the button state (preferably with prop('checked', boolvalue)) – Knur