Dynamic radio buttons cannot be changed (IE)
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:
- <form action="list.htm">
<div id="list"></div>
<button id="btnChoose">Add radio button</button>
</form>
Javascript:
- 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
- add a radio button to a list, without creating duplicates
- select the radio button that has just been added
- allow the user to change their mind
Thanks in advance.