如何启用附近的（对应）文本框时检查复选框是否在asp.net中的tabcontainer，c＃

Question

我刚刚开始倾斜asp.net.With你的所有支持，我希望我会学习从这个论坛额外的一点。

我的问题是，

我有一个TabContainer1在asp.net页面，在那我有多个像（60）检查每一个标签面板框和多个（60）文本框。 现在，如果我检查任何复选框，相应或（靠近）文本被启用。 为我做类似下面

<tr style="width: 100%;"> 
    <td align="left" style="width: 5%;"> 
     PPID[OP_ppid]: 
    </td> 
    <td style="width: 40%;"> 
     <asp:CheckBox ID="chkppid" runat="server" OnChange="javascript:enableTextBox();"/> 
     <asp:TextBox ID="txtppid" Enabled="false" runat="server" ></asp:TextBox> 
    </td> 
    <td align="left" style="width: 5%;"> 
     CONTROL NO[Op_ControlNo]: 
    </td> 
    <td style="width: 40%;"> 
     <asp:CheckBox ID="chkcontrolno" runat="server" OnChange="javascript:enableTextBox();" /> 
     <asp:TextBox ID="txtcontrolno" runat="server" ></asp:TextBox> 
    </td> 
</tr> 
<tr> 
    <td align="left" style="width: 5%;"> 
     MODEL NO[OP_modelno]: 
    </td> 
    <td style="width: 40%;"> 
     <asp:CheckBox ID="chkmodelno" runat="server" OnChange="javascript:enableTextBox();" /> 
     <asp:TextBox ID="txtmodelno" runat="server"></asp:TextBox> 
    </td> 
    <td align="left" style="width: 5%;"> 
     OEM SERIALNo[op_oemserialno]: 
    </td> 
    <td style="width: 40%;"> 
     <asp:CheckBox ID="chkoemserNo" runat="server" /> 
     <asp:TextBox ID="txtoemserno" runat="server"></asp:TextBox> 
    </td> 
</tr> 

就像每个表面板60个文本框。 我下面做这样的启用和禁用

<script type="text/javascript" language="javascript"> 
    function enableTextBox() 
    { 
     if (document.getElementById("<%= chkppid.ClientID %>").checked == true) 
      document.getElementById("<%= txtppid.ClientID %>").disabled = false; 
     else 
      document.getElementById("<%= txtppid.ClientID %>").disabled = true; 

     if (document.getElementById("<%= chkcontrolno.ClientID %>").checked == true) 
      document.getElementById("<%= txtcontrolno.ClientID %>").disabled = false; 
     else 
      document.getElementById("<%= txtcontrolno.ClientID %>").disabled = true; 

     if (document.getElementById("<%= chkmodelno.ClientID %>").checked == true) 
      document.getElementById("<%= txtmodelno.ClientID %>").disabled = false; 
     else 
      document.getElementById("<%= txtmodelno.ClientID %>").disabled = true; 
    } 
</script> 

请建议我怎么一下子实现所有。 预先感谢您。

Answer 1

使用循环（forEach方法关闭下面的代码中的数组）运行所有复选框。事件监听器也被添加到循环中。每个监听器在当前正在处理的复选框的parentNode上使用querySelector获得正确的文本框。

带班HTML用于切换复选框和文本框进行切换：

<td style="width: 40%;"> 
    <asp:CheckBox ID="chkcontrolno" class="toggler" runat="server"/> 
    <asp:TextBox ID="txtcontrolno" class="togglee" runat="server"> 
</asp:TextBox></td> 

Javascript将事件监听添加到每个复选框：

var boxes = Array.from(document.querySelectorAll(".toggler")); 
boxes.forEach((checkbox)=>{ 
    var textbox = checkbox.parentNode.querySelector(".togglee"); 
    if(textbox === null){ 
    console.error("no textbox found to be toggled by ",checkbox); 
    } 
    checkbox.onchange = function(){textbox.disabled = !textbox.disabled;}; 
}); 

---

对于旧的浏览器使用的JavaScript：

var boxes = document.getElementsByClassName("toggler"); 
for(var i = 0; i < boxes.length;i++){ 
    boxes[i].onclick=function(event){ 
     var candidates = event.target.parentNode.childNodes; 
     for(var j = 0; j < candidates.length; j++){ 
      if(candidates[j].className == undefined) continue; 
      if(candidates[j].className.indexOf("togglee")>-1){ 
       candidates[j].disabled = !candidates[j].disabled; 
       break; 
      } 
     } 
    } 
}