Ändern Radio Button Name Javascript funktioniert nicht in IE

Question

Ich habe ein paar Radiobuttons in einer JSP-Seite. Ich führe eine Javascript-Methode aus, sobald die Seite geladen ist, die nach bestimmten Radio-Buttons sucht und ihren Namen ändert, damit sie wie eine Radio-Gruppe funktionieren.

Ich mache es so, weil die Radiobuttons innerhalb der JSF-Tabelle sind und ich keinen Zugriff auf die Namenseigenschaft beim Codieren habe und ich möchte, dass alle Radioknöpfe wie eine Radiogruppe funktionieren.

Anyways das Skript läuft ohne Probleme und die Namen der Radio-Buttons sind richtig geändert.

Aber während dies in FF 3 funktioniert (die Arbeit wie eine Radio-Gruppe) funktioniert es nicht in IE 6 oder IE7, obwohl sie die gleiche "Name" -Eigenschaft haben. Weiß jemand wie ich das lösen kann?

function setRadioGroup (nombreRadio){ 
    var listaRadios = document.getElementsByTagName('input'); 
    var tam = listaRadios.length; 
    for (i = 0; i < tam; i++){ 
     if (listaRadios[i].type == 'radio' && listaRadios[i].title == 'Seleccionar'){ 
     listaRadios[i].name = nombreRadio; 
     } 
    } 
} 

EDIT: die Code-Ausgabe der Webseite hinzugefügt:

<form id="formulario" name="formulario" method="post" 
    action="/serequp/faces/administracion/articulosPv.jspx"><input 
    type="hidden" id="formulario:hidRegTablaArticulos" 
    name="formulario:hidRegTablaArticulos" value=""> 
<div class="dr-pnl rich-panel " id="formulario:ContFormularios"> 
<div class="dr-pnl-h rich-panel-header cabeceraFormulario" 
    id="formulario:ContFormularios_header">LISTADO DE GRUPOS DE 
EQUIPAMIENTOS</div> 
<div class="dr-pnl-b rich-panel-body cuerpoFormularios" 
    id="formulario:ContFormularios_body"> 
<table id="formulario:botones"> 
    <tbody> 
     <tr> 
      <td class="estiloColumnas"><input id="formulario:j_id66" 
       name="formulario:j_id66" 
       onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id66':'formulario:j_id66'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id66'});return false;" 
       value="Crear" type="button"></td> 
      <td class="estiloColumnas"><input id="formulario:j_id67" 
       name="formulario:j_id67" 
       onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id67':'formulario:j_id67'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id67'});return false;" 
       value="Modificar" type="button"></td> 
      <td class="estiloColumnas"><input id="formulario:j_id68" 
       name="formulario:j_id68" 
       onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id68':'formulario:j_id68'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id68'});return false;" 
       value="Borrar" type="button"></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 
<table class="dr-table rich-table " id="formulario:tablaArticulos" 
    border="0" cellpadding="0" cellspacing="0"> 
    <colgroup span="3"></colgroup> 
    <thead class="dr-table-thead"> 
     <tr class="dr-table-subheader rich-table-subheader "> 
      <th class="dr-table-subheadercell rich-table-subheadercell " 
       scope="col" id="formulario:tablaArticulos:j_id69header"> 
      <div id="formulario:tablaArticulos:j_id69header:sortDiv">Nombre</div> 
      </th> 
      <th class="dr-table-subheadercell rich-table-subheadercell " 
       scope="col" id="formulario:tablaArticulos:j_id71header"> 
      <div id="formulario:tablaArticulos:j_id71header:sortDiv">Nombre</div> 
      </th> 
      <th class="dr-table-subheadercell rich-table-subheadercell " 
       scope="col" id="formulario:tablaArticulos:j_id75header"> 
      <div id="formulario:tablaArticulos:j_id75header:sortDiv">Descripci&oacute;n</div> 
      </th> 
     </tr> 
    </thead> 
    <tbody id="formulario:tablaArticulos:tb"> 
     <tr class="dr-table-firstrow rich-table-firstrow "> 
      <td class="dr-table-cell rich-table-cell center " 
       id="formulario:tablaArticulos:0:j_id69"> 
      <table id="formulario:tablaArticulos:0:radioGroup1"> 
       <tr> 
        <td><input id="formulario:tablaArticulos:0:radioGroup1:0" 
         type="radio" name="formulario:tablaArticulos:0:radioGroup1" 
         value="1" onclick="updateSelected('hidRegTablaArticulos', '1');" 
         title="Seleccionar"><label 
         for="formulario:tablaArticulos:0:radioGroup1:0"></label></td> 
       </tr> 
      </table> 
      </td> 
      <td class="dr-table-cell rich-table-cell center " 
       id="formulario:tablaArticulos:0:j_id71">fff</td> 
      <td class="dr-table-cell rich-table-cell center " 
       id="formulario:tablaArticulos:0:j_id75">PRUEBA SDS</td> 
     </tr> 
     <tr class="dr-table-firstrow rich-table-firstrow "> 
      <td class="dr-table-cell rich-table-cell center " 
       id="formulario:tablaArticulos:1:j_id69"> 
      <table id="formulario:tablaArticulos:1:radioGroup1"> 
       <tr> 
        <td><input id="formulario:tablaArticulos:1:radioGroup1:0" 
         type="radio" name="formulario:tablaArticulos:1:radioGroup1" 
         value="1" onclick="updateSelected('hidRegTablaArticulos', '2');" 
         title="Seleccionar"><label 
         for="formulario:tablaArticulos:1:radioGroup1:0"></label></td> 
       </tr> 
      </table> 
      </td> 
      <td class="dr-table-cell rich-table-cell center " 
       id="formulario:tablaArticulos:1:j_id71">dd</td> 
      <td class="dr-table-cell rich-table-cell center " 
       id="formulario:tablaArticulos:1:j_id75">PRUEBA SDS</td> 
     </tr> 
    </tbody> 
</table> 
<script> 
          setRadioGroup('radioGroup1'); 
         </script></div> 
</div> 
<table id="formulario:botonera"> 
    <tbody> 
     <tr> 
      <td><input id="formulario:j_id80" name="formulario:j_id80" 
       onclick="A4J.AJAX.Submit('_viewRoot','formulario',event,{'parameters':{'formulario:j_id80':'formulario:j_id80'} ,'actionUrl':'/serequp/faces/administracion/articulosPv.jspx','similarityGroupingId':'formulario:j_id80'});return false;" 
       value="Grabar" type="button"></td> 
     </tr> 

    </tbody> 
</table> 
<input type="hidden" name="formulario" value="formulario"><input 
    type="hidden" name="autoScroll" value=""><input type="hidden" 
    name="formulario:j_idcl" value=""><input type="hidden" 
    name="formulario:_link_hidden_" value=""><script 
    type="text/javascript">function clear_formulario() { 
_clearJSFFormParameters('formulario','',['formulario:j_idcl','formulario:_link_hidden_']); 
} 
function clearFormHiddenParams_formulario(){clear_formulario();} 
function clearFormHiddenParams_formulario(){clear_formulario();} 
clear_formulario();</script><input type="hidden" name="javax.faces.ViewState" 
    value="!40dc077b"></form>* 

Answer 1

Ich habe endlich die Antwort!

Die Lösung kommt aus dieser blog, aber mit einigen Änderungen (der Blog, wie viele andere, lösen das Problem für ein neues Element zu erstellen, nicht zu ändern, ein vorhandenes).

Das Problem besteht darin, dass Internet Explorer einige Attribute während der Laufzeit nicht zulässt. Einer davon ist der Attributname. Da es nicht geändert werden kann, ist das Verhalten nicht das, was Sie erwarten. Die Lösung besteht darin, ein neues Element zu erstellen, das alte zu entfernen und es durch das neue zu ersetzen.

Hier ist die Lösung (Arbeit mit Firefox 3 und Internet Explorer 7):

<script> 
function setRadioGroup (name){ 
    var listaRadios = document.getElementsByTagName('input'); 
    var tam = listaRadios.length; 
    for (i = 0; i < tam; i++){ 
    cur = listaRadios[i]; 
    if (cur.type == 'radio'){ 
     try { 
     // if not IE, raise an error and go to catch.    
      element = document.createElement('<input onclick="alert(this.name + this.value);" type="radio" name="' + name + '" value="' + cur.value + '">'); 
      parentNode = cur.parentNode; 
      parentNode.insertBefore(element, cur); 
      parentNode.removeChild(cur); 
     } catch (err) { 
      cur.setAttribute('name', name); 
      cur.setAttribute('onclick', 'alert(this.name + this.value);'); 
     } 
    } 
    } 
} 
</script> 

<html> 
    <head> 
    <title>My Page</title> 
    </head> 
    <body onload="setRadioGroup('test')"> 
    <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> 
     <div align="center"><br> 
     <input type="radio" value="Milk"> Milk<br> 
     <input type="radio" value="Butter" > Butter<br> 
     <input type="radio" value="Cheese"> Cheese 
     <hr> 
     <input type="radio" value="Water"> Water<br> 
     <input type="radio" value="Beer"> Beer<br> 
     <input type="radio" value="Wine" > Wine<br> 
     </div> 
    </form> 
    </body> 
</html>