Question

I am trying to use the jQueryUI button widget, especially the option to turn checkbox into nice buttons.

The normal button works fine, but the checkbox doesn’t!

Here is my code

HTML:

<button id="button">button</button>
<label for="input">
    <input id="input" type="checkbox"/>Checkbox
</label>

JavaScript:

$('#button').button();
$('#input').button();

I can’t understand why it doesn’t work on checkbox!!

DEMO

Answer 1

Solution:
Change html to:

<button id="button">button</button>
<label for="input">
    Checkbox
</label>
<input id="input" type="checkbox"/>

And it will work properly, demo.

Explanation:
If you check the jQuery-UI code, especially the function _determineButtonType (line 7069 on version 1.8.18) you will find

var ancestor = this.element.parents().filter(":last"),
            labelSelector = "label[for='" + this.element.attr("id") + "']";
this.buttonElement = ancestor.find( labelSelector );

So jQuery-UI assumes that it can find the label within the last parent of the input, while in your example, the label is the last parent.
I think this is a bug that should be fixed, because many developers have the habbit to write the label just like that.