Thay đổi tên nút radio javascript không hoạt động trong IE

Question

Tôi có một vài nút vô tuyến trong trang jsp. Tôi chạy một phương thức javascript khi trang được tải tìm kiếm các nút radio nhất định và thay đổi tên của nó để chúng hoạt động giống như một nhóm radio.

Tôi đang làm theo cách này bởi vì các nút radio nằm trong bảng jsf và tôi không có quyền truy cập vào thuộc tính tên khi mã hóa và tôi muốn tất cả các nút radio hoạt động giống như một nhóm radio.

Dù sao tập lệnh chạy không có sự cố và tên của nút radio được thay đổi chính xác.

Nhưng khi tính năng này hoạt động trong FF 3 (công việc như nhóm radio), nó không hoạt động trong IE 6 hoặc IE7 mặc dù chúng có cùng tên 'thuộc tính'. Có ai biết làm thế nào tôi có thể giải quyết điều này?

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: Thêm đầu ra mã của trang web:

<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

cuối cùng tôi nhận được câu trả lời!

Giải pháp đến từ blog này, nhưng với một số sửa đổi (blog, như nhiều người khác, giải quyết vấn đề tạo phần tử mới, không sửa đổi phần tử tồn tại).

Sự cố là Internet Explorer không cho phép sửa đổi một số thuộc tính trong thời gian chạy. Một trong số đó là tên thuộc tính. Vì nó không thể được sửa đổi, hành vi không phải là những gì bạn đang mong đợi. Giải pháp là tạo một phần tử mới, loại bỏ phần tử cũ và thay thế nó bằng phần tử mới.

Dưới đây là giải pháp (làm việc với Firefox 3 và IE 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>