Question

CheckBoxList（选择可以是多个）和默认情况下不显示的TextBox。要求是：
1.当用户在CheckBoxList中单击“其他”时，应显示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>

<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的onchange / onclick事件和onClientClick事件进行“提交”按钮，但它们都不起作用。任何帮助是极大的赞赏。

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

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

public void DisplayOtherInfo(object sender, EventArgs e) {

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

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

1 个答案: