c# - 根据 CheckBoxList 选择显示/隐藏文本框并启用/禁用文本框验证

Question

有一个CheckBoxList(可以选择多个)和一个默认不显示的TextBox。要求是:
1. 当用户点击CheckBoxList中的“Other”时，应该显示TextBox。
2. 由于显示时需要TextBox，因此当TextBox不显示时应禁用Validator。

.aspx 内容页

 请选择:
 
     
      
 
      
      
 
      
      
 
      
      
 
      

      
 
      

       
 
       如果选择“其他”，请输入详细信息:
       
 
       
       
 
        ErrorMessage="输入其他信息"SetFocusOnError="true"Display="动态"runat="服务器"/>
       
 
      
      
 
      

       
 
       
       
 
      
      

     

Javascript 放置在 .master 页面上

 函数 ShowOtherInfo() {
          var OI = document.getElementById('OtherInfo');
          var CheckLists = document.getElementById('cblSelection');
          var checkbox = CheckLists.getElementsByTagName("input");
              if (复选框[2].checked) {
                  document.getElementById('OtherInfo').style.display = " block ";
                  ValidatorEnable(document.getElementById('rfvOtherInfo'), true);
              } 别的 {
              document.getElementById('OtherInfo').style.display = "无";
              ValidatorEnable(document.getElementById('rfvOtherInfo'), false);
              }
      }

由于我更喜欢​​使用 Javascript 进行验证，因此我尝试了 CheckBoxList 的 onchange/onclick 事件和“提交”按钮的 onClientClick 事件，但它们都不起作用。任何帮助是极大的赞赏。

初次发布后，我尝试将 CheckBoxList 的 OnSelectedIndexChanged="ShowOtherInfo"替换为 onclick="ShowOtherInfo(this)"。 .cs 文件的隐藏代码是:


公共(public)无效 DisplayOtherInfo(对象发送者，EventArgs e)
{

 CheckBoxList cblSelection = (CheckBoxList)myFormView.FindControl("cblSelection");
    requiredFieldValidator rfvOtherInfo = (RequiredFieldValidator)myFormView.FindControl("rfvOtherInfo");
    HtmlGenericControl OtherInfo = new HtmlGenericControl("OtherInfo");

    for (int i = 0; i < cblSelection.Items.Count; i++)
    {
        if (cblSelection.Items[2].Selected == true)
        {
            OtherInfo.Style["显示"] = " block ";

    rfvOtherInfo.Enabled = true;
        }
        别的
        {
            OtherInfo.Style["显示"] = "无";

            rfvOtherInfo.Enabled = false;
        }
    }
}

但是 TextBox 仍然不显示，更不用说禁用验证器了。

Answer 1

这是 JavaScript 代码

<script type="text/javascript">
        function ShowOtherInfo() {
            var OI = document.getElementById('OtherInfo');
            var CheckLists = document.getElementById('cblSelection');
            var checkbox = CheckLists.getElementsByTagName("input");
            if (checkbox[2].checked) {
                document.getElementById('OtherInfo').style.display = "block";
            } else {
                document.getElementById('OtherInfo').style.display = "none";
            }
            return true;
        }

        function onSubmit() {
            if (document.getElementById('OtherInfoTextBox').value == "") {
                if (checkbox[2].checked) {
                    alert('Enter other info');
                    return false;
                }
                else {
                    return true;
                }
            }
            else {
                return true;
            }
        }
    </script>

这是您的 .aspx 内容

<div>
    <label for="labelSelection">Please Select:</label>           
        <asp:CheckBoxList ID="cblSelection" onclick="ShowOtherInfo(this)" runat="server">
        <asp:ListItem Text="AAA" Value="1" /> 
        <asp:ListItem Text="BBB" Value="2" />            
        <asp:ListItem Text="Other" Value="0" />                       
        </asp:CheckBoxList>

        <div id="OtherInfo" style ='display:none'>
        <label for="labelOtherInfo">Enter detail if "Other" is selected: </label>
        <asp:TextBox ID="OtherInfoTextBox" runat="server" />

        </div> 

        <asp:Button ID="buttonSubmit" runat="server" Text="Submit" CausesValidation="true" OnClientClick="return onSubmit();" /> 
</div>