显示/隐藏文本框和启用/禁用基于CheckBoxList选择的文本框验证

Question

有一个CheckBoxList（选择可以是多个）和默认情况下不显示的文本框。要求如下：
1.当用户在CheckBoxList中单击“其他”时，应显示文本框。
2.由于TextBox在显示时是必需的，因此当TextBox不显示时应验证器被禁用。

的.aspx页面内容

 <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" /> 
     <asp:RequiredFieldValidator ID="rfvOtherInfo" ControlToValidate="OtherInfoTextBox" 
      ErrorMessage="Enter other info" SetFocusOnError="true" Display="Dynamic" runat="server" /> 
     </div> 
     <div> 
     <asp:Button ID="buttonSubmit" runat="server" Text="Submit" CausesValidation="true" OnClientClick="ShowOtherInfo()" OnClick="buttonSubmit_Click" /> 
     </div> 

的Javascript放置的.master页面上

 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"; 
        ValidatorEnable(document.getElementById('rfvOtherInfo'), true); 
       } else { 
       document.getElementById('OtherInfo').style.display = "none"; 
       ValidatorEnable(document.getElementById('rfvOtherInfo'), false); 
       } 
     } 

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

初次发布后，我尝试用Onclick =“ShowOtherInfo（this）”替换CheckBoxList中的OnSelectedIndexChanged =“ShowOtherInfo”。和代码隐藏在cs文件是：

public void DisplayOtherInfo(object sender, 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["display"] = "block"; 

    rfvOtherInfo.Enabled = true; 
     } 
     else 
     { 
      OtherInfo.Style["display"] = "none"; 

      rfvOtherInfo.Enabled = false; 
     } 
    } 
} 

但仍文本框甚至不显示的，不是说禁止验证。

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>