单击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