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

If you want the icon on the right side of the button use secondary in place of primary
Written by Rob W
Related protips
3 Responses
Perfect!!
over 1 year ago
·
Hey thanks for a great solution, do you think it can be implemented on a select option in a select-ui menu?
over 1 year ago
·
@comfuner not sure what you mean...
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
 #Jquery ui 
Authors
brombomb
10.67K
adziendziel
1.171K
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#