Geek Answers Handbook

How to change the jquery ui button that will be selected when the base radio is checked by code?

I am trying to use the jQuery UI plugin for my switch group. The user interface looks cool, but the problem is that when you change the main property of a switch with a switch, the user interface does not change. e.g. If I have 3 radio buttons, tell radio1, radio2, radio3, and if I make radio1 that is selected, the button will not change, but when I update, it will display correctly.

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" /> <script type="text/javascript"> $(function() { $("#radio").buttonset(); $("#mybutton").button(); $("#mybutton").click(function(){$("#radio1").attr("checked","checked");alert($("#radio1").attr("checked"));//returns true}); }); </script> <style> #format { margin-top: 2em; } </style> </head> <body> <div class="demo"> <form> <div id="radio"> <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> </div> <br/> <input type="button" id="mybutton" value="click me"/> </form> </div><!-- End demo --> </body> </html>

Any help is greatly appreciated.

Thanks in advance,

Rajah

+4
source share
2 answers

Use the refresh method to update the state, for example:

 $("#mybutton").click(function(){ $("#radio1").attr("checked","checked"); $("#radio").buttonset('refresh'); });

You can try here from the docs:

refresh - 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.

+16
source

Not sure if this helps, but I ran into a similar problem and using the button ('refresh') and buttonset ('refresh') did not work. My code was contained in bind ({}); container, and after calling ajax, I wanted the radio to be changed.

As a result of sorting, the problem was adding return true after updating the / button buttons.

0
source

More articles:


All Articles