Show/Hide TextBox and enable/disable Textbox validation based on CheckBoxList selection

Question

There is a CheckBoxList (selection can be multiple) and a TextBox which is not displayed by default. The requirements are:
1. When user click "Other" in CheckBoxList, the TextBox should display.
2. Since the TextBox is required when displayed, the Validator should be disabled when the TextBox is not displayed.

.aspx content page

  <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 placed on .master page

  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); } } 

Since I prefer using Javascript for validation, I have tried onchange/onclick event for CheckBoxList and onClientClick event for "Submit" button, but none of them works. Any help is greatly appreciated.

After initial posting, I tried to replace OnSelectedIndexChanged="ShowOtherInfo" with onclick="ShowOtherInfo(this)" for CheckBoxList. And the code-behind on .cs file is:

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; } } } 

But the TextBox still doesn't even display, not to say disable validator.

Answer 1

This is the Javascript Code

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

and this is your .aspx content

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