How to solve jquery ui / firefox error in status button with removeClass?

Question

I limit the number of checked flags, but the style was wrong in firefox. Actually theres an error on firefox with a status button, see this example on firefox, If you double-click on the button, the state does not update well if lengh> 3 (in this case), so I'm trying to remove the ui state class, but it doesn't work, does anyone have a solution ?!

http://jsfiddle.net/mbAwC/22/

$('.limit :checkbox').change(function () { var $cs=$(this).closest('.limit').find(':checkbox:checked'); if ($cs.length > 3) { $(this).prop('checked', false).removeClass("ui-state-active ui-state-hover ui-state-focus").button('refresh'); 

Regards Jess

Answer 1

This is a strange mistake, because it happens when a double-click event occurs. This is why your code does not work, because when you double-click, no change event occurs. Thus, you cannot change the status and remove classes in "onchange". As a fix for this ridiculous problem, I tried adding sth as follows:

 $('.limit label').dblclick(function () { if (!$(this).is(':checked')) { $(this).removeClass("ui-state-active ui-state-hover ui-state-focus "); } }); 

This handles a strange double-click and removes the styles if they are applied incorrectly if the checkbox is not selected.