Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#7856 closed bug (notabug)

buttonset() Buttons remain highlighted after being 'unchecked'

Reported by: ShaneK Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.button Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:


From jQueryUI version 1.8.14 onwards there appears to have been a change to checkbox buttonset handling within the ui.button component. In 1.8.x releases up to and including 1.8.13 when a button is 'unchecked' and the mouse is moved so that it is no longer hovering over the 'unchecked' button, the highlighting on the button changes correctly to indicate that it is now in its 'unchecked' state. However from version 1.8.14 onwards, certain browsers (see below), no longer behave as expected. Instead, when a 'checked' button within the buttonset is 'unchecked', it remains highlighted even when the mouse is no longer hovering over it - clicking on another button in the buttonset (or simply clicking anywhere outside the 'unchecked' button) causes the styling of the originally unchecked button to change to the expected state (perhaps as a result of no longer having focus).

The described behavior can be observed here:

This is a reduced version of the buttonset() demo from - by default it is configured to use 1.8.13 - which should work correctly in all tested browsers. Updating the script/css URL's to use 1.8.14 and re-running shows the unexpected behavior.

This behavior has been observed in the following browsers (others may be affected also) with versions of jQueryUI from 1.8.14 onwards (all tested browsers appear to behave as expected with versions 1.8.13 and earlier):

Mozilla Firefox 7.01/8.0 Opera Internet Explorer 9


Google Chrome 15.0.874.106 Apple Safari 5.1.1

Change History (6)

comment:1 Changed 10 years ago by Scott González

Resolution: invalid
Status: newclosed

What's actually happening is the button remains focused. Try pressing tab after you uncheck the checkbox. The opposite of what you're reporting may actually be a bug.

comment:2 Changed 10 years ago by ShaneK


Thanks for your response, however I'm not sure I follow. I understand that the checkbox 'button' remains focused after 'unchecking' in certain browsers (Firefox/Opera/IE). But *should* it? I would expect that after 'unchecking' the button and moving the mouse cursor away from it that it would automatically lose its focus and the styling would be updated to reflect its 'unchecked' state - this is how it appears to have worked in browsers prior to 1.8.14.

In any case, the behavior (whatever it should be) is no longer consistent across browsers - and surely that can't be right?



comment:3 Changed 10 years ago by nuxwin

Please, reopen this ticket. The current behavior is bad. When a checkbox is unchecked, it must lose the focus when we move the mouse outside it. The current behavior is really annoying.

Easy fix for now:

<script type="text/javascript">
	$(document).ready(function() {
		// Fix for
		$('[type=checkbox]').change(function() {
			if(!$(this).is(':checked')) {
Last edited 10 years ago by nuxwin (previous) (diff)

comment:4 Changed 10 years ago by Scott González

Filed a new bug with the correct description: #7902.

comment:5 Changed 9 years ago by sergio

I agree with nuxwin. This ticket should be reopened because the bug is still there in 1.8.18 and it is even worse when the checkbox is inside a container you have made "sortable":

$("container .checkboxes").button();

The checkbox remains highlighted even if you click something else inside that container (even other buttons) and the fact that behavior is not the same in Webkit browsers tell us that something is definitely wrong here.

comment:6 Changed 9 years ago by Scott González

@nuxwin @sergio Have either of you actually read the comments above? We're not doing anything special, this is the built-in behavior of the browser. There's a separate ticket to track the fact that different browsers have different behavior.

Note: See TracTickets for help on using tickets.