JQuery UI switch - how to properly switch checked state

Question

I have a set of radio buttons, all in style with jQuery UI .button() .

I want to change their condition. However, when I do this programmatically on a container change event with:

 $("#myradio [value=1]").attr("checked", false); $("#myradio [value=2]").attr("checked", true); 

The values ​​are changed correctly, but the user interface style still shows an unverified radio button with a verified style, and the verified one still looks unverified.

I looked through the jQuery UI documentation on the button() method for radio buttons, but there is nothing about how to change state and update the user interface style.

In short, the problem is that calling the code is $("selector").button("disable"); does not change the active state of the button - the basic switch is checked correctly, but the active state of the user interface does not change. So, I get a greyed out button that looks like it is still checked and the real selected button is not showing.

Decision

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

Answer 1

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

Updates the visual state of the button. Useful for updating the state of a button after a changed or disabled native element has been changed programmatically.

Working example: http://jsbin.com/udowo3

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

This uses identifiers for radio stations, but it doesn’t matter if you get a jQuery instance containing the corresponding input[type=radio] element.

Answer 2

Despite messages to the contrary, you can specify a switch by identifier. Not sure why the jQuery user interface does not automatically update the buttons when checking, 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

Looking at the code , you need to switch the ui-state-active class, but the easiest way is just $('someradiobutton').trigger('click') (or if you don't want your custom event handlers to fire, $('someradiobutton').trigger('click.button') ).

Answer 4

Will reset all the radio buttons, but you can more accurately determine the selector.

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

Answer 5

If someone is still having this problem, use:

 .prop('checked',true); 

instead:

 .attr("checked", true); 

Answer 6

I solved this by completely resetting the Buttonset using setTimeout.

Add a click to the radio button that needs confirmation.
Notice the pressed "radioButton" and the full "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(); 

That's all.