JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/black-tie/jquery-ui.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<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").click()
$("#dumpSec").buttonset('refresh');
});
$( "#nbr2" )
.button()
.click(function( event ) {
$("#r_link").click()
$("#dumpSec").buttonset('refresh');
});
$( "#nbr3" )
.button()
.click(function( event ) {
$("#r_public").click()
$("#dumpSec").buttonset('refresh');
});