CODEWITHSUNDEEP
jqueryjquery-ui
ilyes kooli
ilyes kooli

Reputation: 12053

jQuery UI button function doesn't work on checkbox

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

Upvotes: 3

Views: 4658

Answers (2)

ilyes kooli
ilyes kooli

Reputation: 12053

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.

Upvotes: 7

Joey
Joey

Reputation: 1676

<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.

Upvotes: 3

Related Questions