Search
Write a publication
Pull to refresh

IE. Проблема при динамическом создании radio инпутов

В internet explorer ниже 8 версии существует такая проблема: при динамическом создании радио инпутов, они(инпуты) отображаются неактивными(т.е. невозможно выбрать инпут кликом по нему).

В остальных браузерах, динамически создать набор радиобаттонов можно, например, так:
var radio1 = document.createElement('input');
radio1.setAttribute('type', 'radio');
radio1.setAttribute('name', 'myRadioName');
radio1.setAttribute('value', 0);
radio1.setAttribute('checked', true);

var radio2 = document.createElement('input');
radio2.setAttribute('type', 'radio');
radio2.setAttribute('name', 'myRadioName');
radio2.setAttribute('value', 1);

var radioset = document.getElementById('radioset');
radioset.appendChild(radio1);
radioset.appendChild(radio2);


* This source code was highlighted with Source Code Highlighter.
Оказалось, что в ie созданные таким способом радиобаттоны переключать невозможно.

Почему?


Ответ был найден
на-самом-главном-сайте-ms, где указано, что:
Пользователь может выбирать тольке те радиобаттоны, у которых есть атрибут name

Как вы догадались, это еще не обьясняет неработоспособность приведенного выше кода, так как атрибут name там устанавливается с помощью метода setAttribute.
Покопавшись еще немного там же, можно узнать, что:
ie8 может устанавливать атрибут name для элементов, созданных динамически, с помощью метода createElement

А это, дорогие друзья, означает, что остальные версии недобраузера этого делать не могут(Разве это не прекрасно). Как же жить то тогда дальше?

Решение


Далее там же указывается, что:
Для того, чтобы установить атрибут name в более ранних версиях, необходимо вставлять атрибут и его значение сразу в метод createElement

То есть для вышеприведенного примера надо писать так:
 var radio1= document.createElement('<input type="radio" name="q" value="0" checked />');
 var radio2= document.createElement('<input type="radio" name="q" value="1" />');
 
 var radioset = document.getElementById('radioset');
 radioset.appendChild(radio1);
 radioset.appendChild(radio2);


* This source code was highlighted with Source Code Highlighter.
Учтите, это работает только в ie.
Также можно использовать innerHTML родительской ноды. Например:
 var lab1= document.createElement('label');
 lab1.innerHTML = 'I hate IE <input type="radio" name="q" value="0" checked />'

 var lab2= document.createElement('label');
 lab2.innerHTML = 'I love IE <input type="radio" name="q" value="0" disabled />'
 
 var radioset = document.getElementById('radioset');
 radioset.appendChild(lab1);
 radioset.appendChild(lab2);


* This source code was highlighted with Source Code Highlighter.
Спасибо за внимание. Надеюсь, это окажется для кого-то полезным.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.