jQuery Forum

Hi All,

I've found a very weird issue with my form. I'm dynamically generating radio buttons, but in Internet Explorer (tested in versions 7 & 6), you cannot change the radio buttons after they've been added. In Firefox (testing in 3.6) it's fine. I've mocked up some code below which shows the issue. It generated up to 10 radio buttons (by random number) and checks that radio button programmatically. However you cannot manually select an already generated radio button.

HTML:

1. <form action="list.htm">
     <div id="list"></div>
     <button id="btnChoose">Add radio button</button>
   </form>

Javascript:

1. var addRadioNode = function(nodeId) {
       var list = $('#list');
   
       // check radio not in list already
       var found = false;
       $('input:radio', list).each(function(i) {
           if ($(this).val() === nodeId) {
               found = true;
               return false;
           }
       });
   
       if (!found) {
           // create new radio
           var radio = $('<input/>').attr({
               type: 'radio',
               name: 'confirmedMappings.InstanceKey',
               id: 'confirmedMappings_InstanceKey',
               value: nodeId
           });
           var label = $('<label/>').append(radio).append(nodeId);
   
           // append radio to list
           label.appendTo(list);
       }
   
       // reset all radios
       $('input:radio', list).attr('checked', false);
       // select new radio
       $('input[value=' + nodeId + ']:radio', list).attr('checked', true);
   };
   
   jQuery(function($) {
       $('#btnChoose').click(function(event) {
           var num = Math.floor(Math.random() * 10 + 1);
           addRadioNode('rad-' + num);
           event.preventDefault();
       });
   });

Anyone have any ideas what's going on? I was using jQuery v1.3.2

My aim is to

1. add a radio button to a list, without creating duplicates
2. select the radio button that has just been added
3. allow the user to change their mind

Thanks in advance.