【问题标题】:Require asp:TextBox when specific asp:CheckBoxList ListItem checked当特定 asp:CheckBoxList ListItem 检查时需要 asp:TextBox
【发布时间】:2017-03-24 15:48:19
【问题描述】:

我没有找到任何要求在选中 CheckBoxList 中的特定复选框时填写文本框的示例。我发现了很多独立 CheckBoxes 的例子。我知道CheckBoxList 是一种独特的动物,没有内置的必需验证器。

当用户选中复选框列表中的“其他”框时,我需要用户填写相关的文本框。最好根据选中的框来显示/隐藏文本框。

【问题讨论】:

  • 它应该来自前端还是?

标签: javascript c# asp.net webforms forms-authentication


【解决方案1】:

当一切都失败时,创建一个CustomValidator。有了它,您可以编写自己的规则来判断一个或多个元素何时有效。然而,为了让它工作,我将 checkBoxListValidator 类添加到 CheckBoxList 以便能够使用 jQuery 找到它。

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkBoxListValidator">
    <asp:ListItem Text="Option A" Value="1"></asp:ListItem>
    <asp:ListItem Text="Option B" Value="2"></asp:ListItem>
    <asp:ListItem Text="Option C" Value="3"></asp:ListItem>
    <asp:ListItem Text="Other" Value="-1"></asp:ListItem>
</asp:CheckBoxList>

<asp:TextBox ID="TextBox1" runat="server" Style="display: none"></asp:TextBox>

<asp:CustomValidator ID="CustomValidator1" runat="server" Text="Please fill out the TextBox" ClientValidationFunction="requiredFieldIfOther"></asp:CustomValidator>

<script type="text/javascript">
    function requiredFieldIfOther(sender, element) {
        var isValid = true;
        var textBoxToValidate = $("#<%= TextBox1.ClientID%>");
        $('.checkBoxListValidator input[type="checkbox"]').each(function () {
            if ($(this).val() == "-1" && $(this).prop("checked") == true && textBoxToValidate.val() == "") {
                isValid = false;
            }
        });
        element.IsValid = isValid;
    }

作为奖励,代码显示和隐藏基于other 复选框的文本框。

    $('.checkBoxListValidator input[type="checkbox"]').change(function () {
        var textBoxToValidate = $("#<%= TextBox1.ClientID%>");
        if ($(this).val() == "-1" && $(this).prop("checked") == true) {
            textBoxToValidate.prop("style", "display:block");
        } else {
            textBoxToValidate.prop("style", "display:none");
        }
    });
</script>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-11-05
    • 1970-01-01
    • 2020-08-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多