Opened 13 years ago

Closed 11 years ago

Last modified 11 years ago

#6063 closed bug (wontfix)

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

Reported by: SiCo Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.button Version: 1.9.0
Keywords: label, button, html Cc:
Blocked by: Blocking:


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

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

Change History (14)

comment:1 Changed 13 years ago by 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.

comment:2 Changed 13 years ago by urkle

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

comment:4 Changed 12 years ago by 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.

Last edited 12 years ago by SiCo (previous) (diff)

comment:5 Changed 12 years ago by urkle

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

comment:6 Changed 12 years ago by Scott González

#7723 is a duplicate of this ticket.

comment:7 Changed 12 years ago by 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

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

comment:8 Changed 12 years ago by 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).

Last edited 12 years ago by studgeek (previous) (diff)

comment:9 Changed 12 years ago by 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.

Last edited 12 years ago by studgeek (previous) (diff)

comment:10 Changed 12 years ago by 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.

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

comment:11 Changed 11 years ago by Scott González

Milestone: TBD1.11.0

comment:12 Changed 11 years ago by bchiasson

Status: newopen
Summary: Button doesn't support radio input inside label.Button: Labels with implicit controls are not converted to buttons.

comment:13 Changed 11 years ago by Jörn Zaefferer

Resolution: wontfix
Status: openclosed

The input-inside-label approach is causing accessibility problems. You should mark up your code properly using id/for attributes. See

I've added a note about this to the Button documentation:

Considering that and the complexity a workaround introduces (see, we're not going to address this inside the Button widget.

comment:14 Changed 11 years ago by fjan

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


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


will remain usable.

Get patch file from jsfiddle or here:

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

Note: See TracTickets for help on using tickets.