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!
You need to use .prop() instead of .attr() to set the checked status
$("#r_link").prop("checked", true);
Demo: Fiddle
Read: Attributes vs Properties