Jquery UI toggle button (checkbox) click/drag bug

Question

I'm posting this along with the best answer I have come up with. I haven't found any similar questions, so here goes.

When a input of type checkbox is converted to a jquery ui button, I have observed (as have others) that it only registers a click if the mouse is kept completely still while clicking. Any movement what-so-ever and nothing happens. To the user this can only be perceived as flaky and unreliable behavior.

How do others work around this behavior (observed with jquery 1.6.3/jquery ui 1.8.16 in chrome 14 and ie 8)? Is there something obvious I am missing since I have to go to such lengths to get the expected behavior?

Answer 1

I got the idea for this workaround from an issue report on the jquery ui page linked to above, but it needed a bit of work: jsfiddle

I attach a click listener on the label and handle the state change myself. I also found it necessary to prevent text selection on the toggle button. This is done with css (found that elsewhere on SO)

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;   
}

Maybe this can save the next person that wants to use the jquery ui toggle button some time and grief. If anybody has a better/cleaner solution, I am very interested!

Answer 2

Old question, but I just thought I'd post this since I had the same question and made my way here --- Judging by the behavior of the jQuery UI buttons demonstrated in the demo here http://jqueryui.com/button/#radio using Firefox, it seems to have been fixed in v1.10.4. Here is the bug ticket - http://bugs.jqueryui.com/ticket/7665. And here is the changelog for v1.10.4 - http://jqueryui.com/changelog/1.10.4/

Fixed: Radio button & checkboxes ignore mouseclicks for minor mouse movements. (#7665, 52e0f76)

There is still a question of it not firing the click event though.