javascript - 如何在选中 asp.net、c# 中 tabcontainer 中的复选框时启用附近(相应)文本框

Question

我刚刚开始学习asp.net。在你们的支持下，我希望我能从这个论坛学到更多东西。

我的问题是，

我在 asp.net 页面中有一个 TabContainer1，因为每个选项卡面板中有多个类似 (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方法关闭数组)来运行所有复选框。事件监听器也添加到循环中。每个监听器使用 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;
            }
        }
    }   
}