jQuery Radio Buttons not switching properly

Question

Here's the problem: I create a list of X radio buttons dynamically when a page loads, once the list is created and displayed I only want the user to be able to select 1 at a time (as per a normal group of radio buttons). However, the user can select multiple options, as if the radio buttons are functioning individually rather than as a group of radio buttons.

Here's the code that I call on document ready:

    // On document ready...
    $(document).ready(function() {

        // add click events to any inputs to the radio btn div, setup jQuery UI radio buttonset...
        $("#radioX").on("click", "input", displayProductDetails).buttonset();

        // get all the products
        $.get(
                "php/getProducts.php",
                function(responseData){

                    // set the products array
                    products = responseData;

                    // setup the radio buttons for the products returned
                    setupProductRadioButtons(products);
                },
                "json"
        );
    });

Here's the code that creates my radio buttons:

    // method used to setup the list of selectable products based on the list returned
    // from the server
    function setupProductRadioButtons(products) {

        // create a radio button for each element in the products array
        jQuery.each(products, function(index) {

            // get the product from the array using the current index
            var product = products[index];

            // create a new radio button using the product name
            createNewRadioButton(
                    '#radioX',
                    product.Id,
                    product.Id,
                    product.Name,
                    index
            );
        });

        // refresh the button set - jQuery UI
        $("#radioX").buttonset("refresh");
    }

    // function used to create a new radio button
    function createNewRadioButton(
            selector,
            newRadioBtnId,
            newRadioBtnName,
            newRadioBtnText,
            newRadioBtnValue){

        // create a new radio button using supplied parameters
        var newRadioBtn = $('<input />').attr({
            type: "radio", id: newRadioBtnId, name: newRadioBtnName, value: newRadioBtnValue
        });

        // create a new label and append the new radio button
        var newLabel = $('<label />').attr('for', newRadioBtnId).text(newRadioBtnText);

        // add the input then the label (and forget about the <br/>
        $(selector)
                .append(newRadioBtn) // add the radio button
                .append(newLabel)    // add the label
                .append("<br>");     // add a line break to separate the buttons
    }

Here's the HTML (minus the dynamically created radio buttons):

<div id="leftMenu">

<form>
    <div id="radioX">

    </div>
</form>

</div>

Any ideas? If I set up a load of jQuery UI radio buttons manually everything works as I would expect, I select 1 option, all others are deselected, I select a different option, all others are deselected etc. The above example however lets me select multiple.

Here's a screenshot of what I'd expect to happen (middle option was selected by default, I then chose the currently highlighted option, middle option was automatically unhighlighted): expected behaviour

Here's a screenshot of what actually happens (using my dynamically created radio buttons): actual behaviour

Answer 1

The name attribute for dynamically generated radio inputs is "Product.Id". However, if you want radio buttons to be mutually exclusive you need to give them the same name. For example change the method to something like:

createNewRadioButton(
    '#radioX',
    product.Id,
    product.GroupByName, // ! use one identifier for mutually exclusive radio's
    product.Name,
    index
);

Answer 2

Can you add a JavaScript onclick function that iterates through the group of radio buttons and then enables the newly selected button? I did something similar for widely spread out JSF radio buttons, so the code isn't exact to your problem, but perhaps something close would work:

function updateRadioButtons(radio) {
    var id = radio.name.substring(radio.name.lastIndexOf(':'));
    var el = radio.form.elements;
    for ( var i = 0; i < el.length; i++) {
        if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
            el[i].checked = false;
        }
    }

    radio.checked = true;
}

And the radio button's onclick event would pass it would have:

onclick='updateRadioButtons(this);'

You'll need a naming convention for your groups of radio buttons that belong together. Like radioGroupA:button1, radioGroupA:button2, etc.