1

有一个CheckBoxList（可以多选）和一个默认不显示的TextBox。要求是：
1. 当用户在 CheckBoxList 中点击“Other”时，应该显示 TextBox。
2. 由于显示时需要TextBox，所以当TextBox不显示时，Validator应该被禁用。

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

放置在 .master 页面上的 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";
                  ValidatorEnable(document.getElementById('rfvOtherInfo'), true);
              } else {
              document.getElementById('OtherInfo').style.display = "none";
              ValidatorEnable(document.getElementById('rfvOtherInfo'), false);
              }
      }

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

初次发布后，我尝试用 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;
        }
    }
}

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

4

1 回答 1

0

这是 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>
于 2013-03-20T08:14:42.697 回答