Menu
I am trying to use Jquery UI button plugin for my radio button group. The UI looks cool but the problem is when I change the underlying radio button's checked property the UI does not change. for ex. If I have 3 radio buttons say radio1, radio2, radio3 and if I make radio1 to be selected then the button does not change but when I refresh it is displaying 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 much appreciated.
Thanks in advance,
Raja
595
Use the refresh method to update the state, like this:
$("#mybutton").click(function(){
$("#radio1").attr("checked","checked");
$("#radio").buttonset('refresh');
});
You can give it a try here, from the docs:
refresh- Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
