When the jQuery UI Button widget was introduced, I was amused,  but I wasn't exactly blown-away.  It's not as exciting as Autocomplete, Accordion, or some of the other widgets, but handy nonetheless.  However, when I discovered that it supported checkboxes and radiobuttons, I started to get excited, but only because I had yet to learn that the idea was better in theory than in practice.

The state difference between 'on' and 'off' are almost impossible to differentiate on some of the themes, leaving the user unable to discern whether or not his/her checkbox is 'on' or 'off'.  The problem isn't as drastic for a radiobutton, since the user can compare with the other radiobuttons in a different state, but it still wasn't practical.

But, there was hope.  Having a good foundation, I knew that with a few slight modifications, the Button widget's potential could be fully realized.

The Solution

I actually thought of the solution by accident.  The widget has a 'primary' and 'secondary' icon options.  I mistakenly assumed these were for the 'on' and 'off' icon states.  "Why isn't there an option for an 'on' and 'off' state for icons?"  It was a head scratcher.

To me, having an 'on' and 'off' icon seems like a pretty simple feature, which is why I was surprised when it was overlooked.  It also seemed like it would be simple to implement, and it was!

I took the Button widget, modified it, and voila: 'on' and 'off' state icons. [For simplicity, I removed the secondary state icon]

The Options
options: {
	disabled: null,
	text: true,
	label: null,
	icons: {
	on: 'ui-icon-circle-check',
	off: 'ui-icon-minusthick'

The only real difference is the 'icons' options, which have been renamed to 'on' and 'off' instead of 'primary' and 'secondary'.

The real beauty is that because it's basically a mod of the Button widget, there isn't a need for new stylesheets - the ones already included for the Button will work just fine.


Download Source

jQuery UI Checkbox / Radiobutton Replacement
1.18.2011 ~ 02:44 PM
posted in professional
tagged in jquery : jquery-ui : plugin
comments [3]

@ Jared
Great snippet! I have been looking for an improvement to jQuery UI's checkboxes. One suggestion that I have would be to add "outline: none;" to the CSS. Otherwise, a distracting outline to the right of the checkbox is displayed in IE 8. Thanks for sharing!
7.21.2011 - 01:50 PM
@ Xavier
Hello, Thanks for this script, but could you tell me how to dynamically check or uncheck a checkbox managed by this plugin ? Regards, Xavier
9.29.2011 - 01:20 PM
@ Uwe
Hi, thanks for this script. I wanted to set other icons and noticed a little bug: in the refresh method you always set/unset your default icons. To change this I've modified it like this: refresh: function () { var isDisabled = this.element.is(":disabled"); if (isDisabled !== this.options.disabled) { this._setOption("disabled", isDisabled); } icons = this.options.icons; if (this.type === "radio") { radioGroup(this.element[0]).each(function () { if ($(this).is(":checked")) { $(this).checkbox("widget").addClass("ui-state-active").attr("aria-pressed", true).find('.ui-button-icon-primary').addClass(icons.on).removeClass(icons.off); } else { $(this).checkbox("widget").removeClass("ui-state-active").attr("aria-pressed", false).find('.ui-button-icon-primary').removeClass(icons.on).addClass(icons.off); } }); } else if (this.type === "checkbox") { if (this.element.is(":checked")) { this.buttonElement.addClass("ui-state-active").attr("aria-pressed", true).find('.ui-button-icon-primary').addClass(icons.on).removeClass(icons.off); } else { this.buttonElement.removeClass("ui-state-active").attr("aria-pressed", false).find('.ui-button-icon-primary').removeClass(icons.on).addClass(icons.off); } } }
1.20.2012 - 11:27 AM


Please enter your comment below.