Programmatically selecting radios in jQuery buttonset makes it break down

Question

I'm building an editor function on a website using a jQuery buttonset based on radio buttons. When I load the item into the editor I need to set the selected radio button and then, of course, the user can change the option and it get's saved into the database. When the item closes I want to reset the buttonset to default.

Problem is that when I set the buttonset it works the first time I select each item then it breaks down and stops working all together.

Demo of problem: http://jsfiddle.net/kallsbo/vSmjb/

HTML:

<div id="dumpSec">
    <input type="radio" name="security" id="r_public" value="public" class="rSec">
    <label for="r_public"><i class="icon-globe"></i> Public</label>
    <input type="radio" name="security" id="r_private" value="private" class="rSec">
    <label for="r_private"><i class="icon-lock"></i> Private</label>
    <input type="radio" name="security" id="r_link" value="link" class="rSec">
    <label for="r_link"><i class="icon-link"></i> Anyone with the link</label>
</div>
<div>
    If you use the buttons below you can programmatically select each of the radios in the buttonset once before it all breaks down...
</div>
<div>
     <button id="nbr1">Select Private</button><br/>
     <button id="nbr2">Select Link</button><br/>
     <button id="nbr3">Select Public</button><br/>
</div>

JavaScript:

// Basic function
$("#dumpSec").buttonset();
$("#r_public").attr("checked", true);
$("#dumpSec").buttonset('refresh');

// Put in functions on the demo buttons
$( "#nbr1" )
  .button()
  .click(function( event ) {
    $("#r_private").attr("checked", true);
    $("#dumpSec").buttonset('refresh');
  });

$( "#nbr2" )
  .button()
  .click(function( event ) {
    $("#r_link").attr("checked", true);
    $("#dumpSec").buttonset('refresh');
  });

$( "#nbr3" )
  .button()
  .click(function( event ) {
    $("#r_public").attr("checked", true);
    $("#dumpSec").buttonset('refresh');
  });

I have tried a number of things like trying to trigger the click function of the label for each radio button and so on but I can't find anything that works. Any input is appreciated!

Solution 1

You need to use .prop() instead of .attr() to set the checked status

$("#r_link").prop("checked", true);

Demo: Fiddle

Read: Attributes vs Properties

Solution 2

http://jsfiddle.net/vSmjb/2/

you can trigger click(), to make it work

  $("#r_private").click()

Comments

[Kristofer Källsbo]

Thank you so much for the solution and the link to the documentation why!

[Kristofer Källsbo]

Thank you for the reply! This works beautifully! How ever Aruns solution seems to be the best practice one...

[hoogw]

This is the best solution, because it not only select the radio, also most important it trigger the radio event, all other solution above missing the capability of trigger click radio event !!!!!!!