отключить при нажатии Radiobutton

Question

Отключить При нажатии кнопки «Радио» давайте рассмотрим пример «Основная группа», «Страна», чтобы отключить текстовое поле для зоны, города, штата, диспетчера областей, например, если я выбираю «Основная группа», «Зона» ... далее страна, город, штат, менеджер области должны быть отключены ... ??? как мудрый это пойти ...

<script language="JavaScript" type="text/javascript"> 
    function fun(s) 
    { 
     /* table 1 */ 
     var A=document.getElementById("maingroups").value; 
     var B=document.getElementById("subgroups").value; 
     var C=document.getElementById("itemnames").value; 

     /* table 2 */ 

     var a=document.getElementById("countrys").value; 
     var b=document.getElementById("zones").value; 
     var c=document.getElementById("states").value; 
     var d=document.getElementById("citys").value; 
     var e=document.getElementById("Areamanagers").value; 
     var f=document.getElementById("outlets").value; 


     /* table 1 */ 

     if(s==A) 
      { 

      document.getElementById("maingroup").style.display=''; 
      document.getElementById("subgroup").style.display='none'; 
      document.getElementById("itemname").style.display='none'; 


      } 

     if(s==B) 
     { 
       document.getElementById("maingroup").style.display='none'; 
       document.getElementById("subgroup").style.display=''; 
       document.getElementById("itemname").style.display='none'; 

      } 

     if(s==C) 
     { 
      document.getElementById("maingroup").style.display='none'; 
      document.getElementById("subgroup").style.display='none'; 
      document.getElementById("itemname").style.display=''; 


      } 





    </script> 

JS FIDDLE LINK для справки

Answer 1

попробуйте изменить HTML и сценарий, как это:

Srcipt

window.onload = function() { 
     //hide all text inputs 
     var allTextInputs = textFileds.querySelectorAll('input[type = "text"]'); 
     for (var i = 0; i < allTextInputs.length; i++) { 
      allTextInputs[i].style.display = 'none'; 
     } 

     //based on radio value and name enables text 
     var allRadioInputs = document.querySelectorAll('input[type="radio"][name="A"],input[type="radio"][name="B"]'); 
     for (var i = 0; i < allRadioInputs.length; i++) { 
      allRadioInputs[i].onclick = function() { 
       var name = this.getAttribute('name'); 

       var value = this.value; 
       switch (name) { 
        case 'A': { 
         var mainTextInputs = document.querySelectorAll('input[type="text"].main'); 
         for (i = 0; i < mainTextInputs.length; i++) { 
          mainTextInputs[i].style.display = 'none'; 
         } 
         document.getElementById(value).style.display = 'inline'; 
         document.getElementById(value).setAttribute('disabled', 'disabled'); 
         break; 
        } 
        case 'B': { 
         var subTextInputs = document.querySelectorAll('input[type="text"].sub'); 
         for (i = 0; i < subTextInputs.length; i++) { 
          subTextInputs[i].style.display = 'none'; 
         } 
         document.getElementById(value).style.display = 'inline'; 
         document.getElementById(value).setAttribute('disabled', 'disabled'); 
         break; 
        } 
        default: break; 
       } 
      }; 
     } 
    }; 

Html

<table cellpadding="0" cellspacing="0" border="2" bgcolor="pink"> 
<tr id="main"> 
    <td> 
     <input type="radio" name="A" id="maingroups" value="maingroup"></td> 
    <td><font size="2">Main Group</font></td> 
    <td> 
     <input type="radio" name="A" id="subgroups" value="subgroup"></td> 
    <td><font size="2">Sub Group</font></td> 
    <td> 
     <input type="radio" name="A" id="itemnames" value="itemname"></td> 
    <td><font size="2">Item Name</font></td> 
</tr> 

<tr id="sub"> 
    <td> 
     <input type="radio" name="B" id="countrys" value="country"></td> 
    <td><font size="2">Country</font></td> 
    <td> 
     <input type="radio" name="B" id="zones" value="zone"></td> 
    <td><font size="2">Zone</font></td> 
    <td> 
     <input type="radio" name="B" id="states" value="state"></td> 
    <td><font size="2">State</font></td> 
    <td> 
     <input type="radio" name="B" id="citys" value="city"></td> 
    <td><font size="2">City</font></td> 
    <td> 
     <input type="radio" name="B" id="Areamanagers" value="Areamanager"></td> 
    <td><font size="2">Area Manager</font></td> 
    <td> 
     <input type="radio" name="B" id="outlets" value="outlet"></td> 
    <td><font size="2">Outlet</font></td> 
</tr> 
</table> 
<div id="textFileds"> 
<input type="text" name="maingroup" id="maingroup" class="main" value="A" />  
<input type="text" name="subgroup" id="subgroup" class="main" value="B" />  
<input type="text" name="itemname" id="itemname" class="main" value="C" />  
<input type="text" name="country" id="country" class="sub" value="D" />  
<input type="text" name="zone" id="zone" class="sub" value="E" />  
<input type="text" name="state" id="state" class="sub" value="F" />  
<input type="text" name="city" id="city" class="sub" value="G" />  
<input type="text" name="Areamanager" id="Areamanager" class="sub" value="H" />  
<input type="text" name="outlet" id="outlet" class="sub" value="I" /> 

<input type="submit" name="ab" value="Run Report" /> 
</div> 

ВотDemo