Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change Jquery ui button to be selected when the underlying radio is checked through code?

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

like image 595
Raja Avatar asked Dec 05 '22 01:12

Raja


1 Answers

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.

like image 74
Nick Craver Avatar answered Jan 25 '23 11:01

Nick Craver