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.53K

adziendziel
1.113K
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#