Last Updated: February 25, 2016
· brombomb

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

3 Responses
Add your response


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 ·