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!

score 29 · Accepted Answer · answered Sep 23 '13 at 08:32

29

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

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

Demo: Fiddle

Read: Attributes vs Properties

answered Sep 23 '13 at 08:32

Arun P Johny

384,651
66
527
531

Thank you so much for the solution and the link to the documentation why! – Kristofer Källsbo Sep 24 '13 at 09:46

score 4 · Answer 2 · answered Sep 23 '13 at 08:51

4

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

you can trigger click(), to make it work

  $("#r_private").click()

answered Sep 23 '13 at 08:51

Gena Moroz

929
5
9

Thank you for the reply! This works beautifully! How ever Aruns solution seems to be the best practice one... – Kristofer Källsbo Sep 24 '13 at 09:46
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 !!!!!!! – hoogw Nov 06 '20 at 15:48

Programmatically selecting radios in jQuery buttonset makes it break down

2 Answers2