jQuery UI button function doesn't work on checkbox

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

Where is the documentation that says you can turn a checkbox into a button? — Ash Burlaczenko
– Ash Burlaczenko, Commented Jun 9, 2012 at 22:43
@AshBurlaczenko it's in the second paragraph of the Overview section from the link provided by OP :) — Fabrício Matté
– Fabrício Matté, Commented Jun 9, 2012 at 22:48

ilyes kooli · Accepted Answer · 2013-07-19 09:46:21Z

7

+50

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.

edited Jul 19, 2013 at 9:46

answered Jun 9, 2012 at 22:47

ilyes kooli

12.1k14 gold badges55 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joey · Accepted Answer · 2012-06-09 22:44:29Z

3

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

http://jsfiddle.net/cY7fe/2/

The checkbox should'nt have been within the label, but rather next to it. It seems to be working now.

answered Jun 9, 2012 at 22:44

Joey

1,6763 gold badges19 silver badges36 bronze badges

2 Comments

ilyes kooli Over a year ago

Thanks, seen skafandri's explanation?

Joey Over a year ago

Why yes I have. Quite thorough, he deserves the 'answer' points

Collectives™ on Stack Overflow

jQuery UI button function doesn't work on checkbox

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related