Buttonset not working on inputs with Arrays in name Attribute

[Zidane]

Issue

I had some radiobuttons on my page. They all had a name with arrays (happens quite a lot with cakePHP). As an example one of those radiobuttons:

<input type="radio" id="option1" name="data[Options][Fieldname]" value="1" /><label for="option1">Test1</label>

When I tried to use a buttonset on a group of these (with the same name) the buttonset did not work correctly: When clicked I could activate all the buttons which should not work with radiobuttons. But I could not deactivate any of the buttons.

Solution

After a little search in the source I found a solution that works for me... I had to alter 2 lines in the jquery.ui.button.js file:

The 2 lines:

radios = $( form ).find( "[name=" + name + "]" );

radios = $( "[name=" + name + "]", radio.ownerDocument )

My change: Replacing the

"[name=" + name + "]"

with

'[name="' + name + '"]'

So that the name variable doesn't break the jQuery attribute when it contains array-brackets.

[scott.gonzalez]

We should escape the square brackets within the name instead of quoting.

[joern.zaefferer]

Whats wrong with the quotes?

[scott.gonzalez]

Quotes won't work for cases where there aren't matching brackets. So [name="foo[bar"] wouldn't work.

[scott.gonzalez]

Fixed in r3869. I ended up using quotes because they do work even for unmatched brackets, despite what John said :-P

[xebrix]

Hi,

I have exactly this problem when button is a checxkbox in jquery UI version 1.8.7, well it works with IE 8 but not with Firefox, Safari and Chrome.

The code is: find("[name='"+c+"']"):a("[name='"+c+"']"