Button: Labels with implicit controls are not converted to buttons.

[SiCo]

It appears that the button widget doesn't support the use case of the input being inside the label tag.

The W3 spec (a the bottom of the section 17.9 ​http://www.w3.org/TR/html401/interact/forms.html#h-17.9

The widget creates the buttons however doesn't allow selection. In Firefox 3.6.9 you can double click them to select (however it also selects the text label). This is obviously not as intended.

As a work around the html can be changed, to put the label next to the input. Some frameworks (i.e. Zend Framework) do not output their markup like this though (which is how the problem has come about).

[dmuir]

It sort of works in 1.8.2. The buttons get created, but look like regular buttons rather than a buttonset. I'm uisng a replacement ZF view helper in the mean time.

[urkle]

Proposed fix for this (applies cleanly to 1.8.5 as well)

​http://github.com/urkle/jquery-ui/commit/7495486e0359d881bacfb0e036d81771e229b6c6

[urkle]

Replying to urkle:

Proposed fix for this (applies cleanly to 1.8.5 as well)

​http://github.com/urkle/jquery-ui/commit/7495486e0359d881bacfb0e036d81771e229b6c6

Rebased on head (commit 3f9693695537806244a853d7901912cc9ba94e86) ​http://github.com/urkle/jquery-ui/commits/labelbutton

[SiCo]

I don't know if this has been fixed (I can't see anything to say it's fixed or pending) as of 1.8.5 but upon testing 1.8.6 I run into a recursion error message in the Firefox error console:

"Error: too much recursion Source file: /scripts/jquery/jquery/jquery.min.js Line: 63"

The error is different to what was happening before so I assume some change has made it through. It still works if the label is outside the radio button.

[urkle]

SiCo, that is an unrelated issue and should be reported, as my proposed commits have not been merged into the codebase.

[Scott González]

#7723 is a duplicate of this ticket.

[studgeek]

Copying my info over from my duplicate 7723.

Nesting the input inside a label is called an implicit label (including help folks search), here is an example and I have a live example at ​http://jsfiddle.net/studgeek/8xpYs/.

<label> <input type="checkbox" /> </label>

I've looked at fixing it myself before I found this duplicate. Modifying it to check for a containing label when defining its buttonElement is straightforward, but there are then parts of the implementation that run into recursion problems. The solution I have that works is to dynamically move the input outside the label, but I worry those approaches may confuse developers.

That said, urkle's commit does something similar, but it also seems to have whole lot more code than mine. I'm not entirely sure why, maybe I am missing something. Next time I get a chance I will pass on my fix for comparison.

[studgeek]

I know need to look at this more, but really it feels to me that the checkbox implementation could be improved to be a more like the normal button without needing a label. Right now checkbox doesn't work at all unless its associated with a label (unlike a normal button).

[studgeek]

One issue I found with my current workaround is that check handlers bound to the input do not trigger, instead I have to put them on the containing label. I haven't dug into why yet, but since urkle's solution also moves the input element it may have the same issue. Just something to test when someone looks at integrating this.

[mail6543210]

I wrote another approach: a plugin to convert implicit syntax to explicit. Call .label() first, Then we can call .button() and .buttonset() as usual.

​http://plugins.jquery.com/project/Label

But I still looking forward to the official accepts urkle's patch for the ui-button.

[bchiasson]

​http://jsfiddle.net/bchiasson/Gn6Kz/1/

[Jörn Zaefferer]

The input-inside-label approach is causing accessibility problems. You should mark up your code properly using id/for attributes. See ​http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/

I've added a note about this to the Button documentation: ​https://github.com/jquery/api.jqueryui.com/commit/4234ad1f826316b8fe6c49d1a553f3fd60a93099

Considering that and the complexity a workaround introduces (see ​https://github.com/jquery/jquery-ui/pull/777/files), we're not going to address this inside the Button widget.

[fjan]

For simpler integration I made a patch file to anyone who needs this workaround.

Demo: ​http://jsfiddle.net/fjan/as9nU/

Usage: include jquery-ui-1.9.0.custom.fix6063.js AFTER the jquery-ui-1.9.0.custom.js (or min)

It does not create new derived button widget, just overrides the required function, so

$('selector').button()

will remain usable.

Get patch file from jsfiddle or here: ​http://fjan.eu/jquery-ui-1.9.0.custom.fix6063.js

Please copy the file to your server, don't just include it from the download location.

Tested in Chrome (18.0.1025), FF (16.0.1), Opera (12.02).