jQueryUI, radio button state, and click events

Question

I have a page with several sets of radio buttons that are used to set options. When one clicks on specific ones, others are selected by default using click event handlers. The functionality works perfectly, but there is an issue with the button's visual state.

I'm using jQueryUI's .buttonset() method to improve the aesthetics, and when I trigger a .click() event programatically, the button does not change state visually. This can result in the current options being quite different from what appears on screen.

Sample code to illustrate the problem:

<fieldset>
    <label for="button1">Button 1</label>
    <input type="radio" id="button1" name="test" />

    <label for="button2">Button 2</label>
    <input type="radio" id="button2" name="test" />
</fieldset>

$('fieldset').buttonset();

$('#button2').click(function() {
    alert('button 2 clicked');
});

$('#button2').click();

I also set up a fiddle so you can see it in action, if you so desire: http://jsfiddle.net/T5MGh/

As you would expect, the alert box pops up on page load as it should, but the button does not change visually as it does from a user-click.

Any thoughts?

Nick Craver · Accepted Answer · 2010-06-19 20:24:36Z

7

You can click the actual label that the button set uses, like this:

$('[for=button2]').click();

This works because your structure looks like this after .buttonset():

<fieldset class="ui-buttonset">
    <label for="button1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Button 1</span></label>
    <input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible">

    <label for="button2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">Button 2</span></label>
    <input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible">
</fieldset>

It doesn't work initially because of how jQuery UI does it, it relies on the click coming through the <label>, and the defult browser behavior actually clicking the <input> from that.

answered Jun 19, 2010 at 20:24

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

Rookwood Over a year ago

Works like a charm. Thanks! I would not have figured that out quickly without help.

Rookwood Over a year ago

As a note for anyone who reads this in the future, it seems that it is still necessary to .click() on the radio button, itself, as well. $('[for=button_id], #button_id').click(); Otherwise, it was changing visually, but not affecting the actual button state, the opposite of the original problem.

gnat · Accepted Answer · 2012-09-25 14:51:41Z

4

It may appear that in more recent versions of jQuery / jQuery UI, the behavior has changed, rendering the behavior of the original code posted as this question to what the author of this question wanted (clicking the button from code takes care of both invoking the event and visually changing the button).

You can see that in the referenced jsfiddle as well. So it seems this answer is only relevant for older versions of jQuery / jQuery UI.

edited Sep 25, 2012 at 14:51

gnat

6,251123 gold badges57 silver badges76 bronze badges

answered Sep 8, 2012 at 13:52

matanox

13.9k22 gold badges99 silver badges181 bronze badges

Collectives™ on Stack Overflow

jQueryUI, radio button state, and click events

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related