jQuery UI button set selected icon

Sometimes with the jQuery UI button set it's hard to tell which one is focused. This can be especially true if you only have 2 options. Well here's a trick to add an icon to the currently selected button to make it clearer which one is selected:

$('#mybuttonset').buttonset().change(function() {
 // Remove icons from all buttons
 $('#mybuttonset input').button("option", "icons", {primary: ""});
 // Add icon to the selected button 
 $('input:checked', this).button("option", "icons", {primary: "ui-icon-check"}).button("refresh");
 });
// Don't forgot to load the icon on the default option 
$('input:checked', '#mybuttonset').button("option", "icons", {primary: "ui-icon-check"}).button("refresh");

Here's what it looks like in action

Button set icon

If you want the icon on the right side of the button use secondary in place of primary

Related protips

Have a fresh tip? Share with Coderwall community!