jQuery UI radio button - how to correctly switch checked state

user_106118 0
Viewed 69418

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");
radio-button jquery-ui jquery
7 Answers

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

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

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