IE7 radio button issue when created dynamically

JavaScript
1

I have an issue in IE7 when I am creating clones of radio buttons. I am dynamically updating the name and ID attributes, however, I still have the issue that a radio button being checked resets any of the others which have been created dynamically. Any idea how this can fixed? Here is a fiddle of the issue

This is the JS code which manipulates the form fields:

// Dropdown select
$('#quantity').live("change", function(){

    $('.questions_clonable:not(.questions_clonable:first)').remove();


    // Get value of selection
    var num = $(this).val();

    var cloned_el = $('.questions_clonable').clone();

    if (num > 1)
    {
        for (var i = 1; i < num; i++)
        {
            // Assign cloned block to new var
            var new_block = cloned_el;

             // Store previous number for replacing with current in cloned block input fields
                var prev = i-1;

                // Update input name to make it unique
                new_block.find('input').each(function() {
                    this.name = this.name.replace(prev, i);
                    this.id = this.id + i;
                });

            // Bit of a workaround needed to clone properly, reiterating class name
            $('.multiple_questions_container').append('<span class="questions_clonable hidden">'+new_block.html()+'</span>');

        }
    }
});&#8203;
2

Hi,

It seems your question was answered on StackOverflow already: http://stackoverflow.com/questions/13585939/ie7-radio-button-issue-when-created-dynamically

As the first person to answer points out, it seems IE7 won’t let you rename the radio buttons’ name attribute.

3

Yes, I found the following solution after trying out a few different suggestions.


function setElementName(elems, name) {
        if ($.browser.msie === true){
            $(elems).each(function() {
                this.mergeAttributes(document.createElement("<input name='" + name + "'/>"), false);
            });
        } else {
            $(elems).attr('name', name);
        }
    }