jQuery UI: when using multiple buttonsets (radio-buttons) they forget their state

Question

I'm coding a form with two different button sets. Once one of them is clicked, the other one doesn't display that it is checked any longer:

<script type="text/javascript">

    $(document).ready(function() {
        $( "#mode" ).buttonset();
    $( "#language" ).buttonset();
    });

</script>

<div id="language">
    <input type="radio" id="lang_de" name="mode" checked="checked" value="de" /><label for="lang_de">deutsch</label>
    <input type="radio" id="lang_en" name="mode" value="en" /><label for="lang_en">englisch</label>
</div>
<div id="mode">
    <input type="radio" id="mode1" name="mode" checked="checked" value="html" /><label for="mode1">Mail-Output</label>
    <input type="radio" id="mode2" name="mode" value="source" /><label for="mode2">Mail-Sourcecode</label>
</div>

Once clicked the other one isn't checked any longer.. Or at least it isnt displayed as checked. Has someone else stumpled upon this problem?

Cheers

Answer 1

you used name="mode" for both of button set. thats cause a problem. Change the name attribute of any set and then test. for example:

<div id="language">
    <input type="radio" id="lang_de" name="mode" checked="checked" value="de" /><label for="lang_de">deutsch</label>
    <input type="radio" id="lang_en" name="mode" value="en" /><label for="lang_en">englisch</label>
</div>
<div id="mode">
    <input type="radio" id="mode1" name="mode_next" checked="checked" value="html" /><label for="mode1">Mail-Output</label>
    <input type="radio" id="mode2" name="mode_next" value="source" /><label for="mode2">Mail-Sourcecode</label>
</div>