jQuery: Programmatically manipulate buttonset

Programmatically change selection in jQuery radio buttonset.

by Kristofer Källsbo

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 class="spacer">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 class="spacer">
    <button id="nbr1">Select Private</button>
    <br/>
    <button id="nbr2">Select Link</button>
    <br/>
    <button id="nbr3">Select Public</button>
    <br/>
</div>
<div class="spacer">Credits to <a href="http://stackoverflow.com/users/114251/arun-p-johny" target="_blank">Arun P Johny</a> for helping me figuring this one out!</div>

CSS

.spacer {
    padding-top: 15px;
}

JavaScript

// Basic function
$("#dumpSec").buttonset();
$("#r_public").prop("checked", true).trigger("change");

// Put in functions on the demo buttons
$("#nbr1")
    .button()
    .click(function (event) {
    $("#r_private").prop("checked", true).trigger("change");
});

$("#nbr2")
    .button()
    .click(function (event) {
    $("#r_link").prop("checked", true).trigger("change");
});

$("#nbr3")
    .button()
    .click(function (event) {
    $("#r_public").prop("checked", true).trigger("change");
});