Кнопки Радио jQuery не переключаются должным образом - PullRequest
Новая
       38

Кнопки Радио jQuery не переключаются должным образом

0 голосов
/ 28 ноября 2011

Вот проблема: я создаю список радиокнопок X динамически, когда страница загружается, после того, как список создан и отображен, я хочу, чтобы пользователь мог выбирать только 1 за раз (согласно обычной группе радиокнопки).Тем не менее, пользователь может выбрать несколько параметров, как будто переключатели работают по отдельности, а не как группа переключателей.

Вот код, который я вызываю в готовом документе: 

    // 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"
        );
    });

Вот код, который создает мои радио-кнопки: 

    // 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
    }

Вот HTML-код (без динамически создаваемых радио-кнопок): 

<div id="leftMenu">

<form>
    <div id="radioX">

    </div>
</form>

</div>

Есть идеи?Если я вручную установлю загрузку переключателей jQuery UI, все будет работать так, как я и ожидал, я выберу 1 вариант, все остальные отменены, я выберу другой вариант, все остальные отменены и т. Д. Однако приведенный выше пример позволяет мневыберите несколько .

Вот скриншот того, что я ожидал (средняя опция была выбрана по умолчанию, затем я выбрал выделенную в данный момент опцию, средняя опция автоматически не была выделена): ожидаетсяповедение

Вот снимок экрана того, что фактически происходит (используя мои динамически созданные переключатели): фактическое поведение

Ответы [ 2 ]

4 голосов
/ 28 ноября 2011

Атрибут name для динамически генерируемых радиовходов - «Product.Id».Однако, если вы хотите, чтобы переключатели были взаимоисключающими, вам нужно дать им то же имя.Например, измените метод на что-то вроде: 

createNewRadioButton(
    '#radioX',
    product.Id,
    product.GroupByName, // ! use one identifier for mutually exclusive radio's
    product.Name,
    index
);
0 голосов
/ 28 ноября 2011

Можете ли вы добавить функцию JavaScript onclick, которая перебирает группу переключателей, а затем включает вновь выбранную кнопку?Я сделал нечто подобное для широко распространенных радиокнопок JSF, поэтому код не соответствует вашей проблеме, но, возможно, что-то близкое сработает: 

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;
}

И событие onclick радиокнопки будет проходить так, как если бы: 

onclick='updateRadioButtons(this);'

Вам понадобится соглашение об именах для ваших групп переключателей, которые принадлежат друг другу.Например, RadioGroupA: кнопка1, RadioGroupA: кнопка2 и т. Д.

...