javascript - 使用 JQuery 验证动态添加的选择字段（带有 MasterPage 的 ASP.NET WebForms）

Question

我有这个 ASP.NET WebForm，它有一组选择标签，可以选择添加更多（动态）。

我的问题是：我将如何验证这种类型的表格？我的第一次尝试是创建一个 JQuery 代码来禁用提交数据的按钮，直到所有下拉字段都被填写。问题是我使用的代码似乎没有触发启用按钮的功能.

这是 WebForm 的代码，此内容占位符位于母版页上的 Form 标记内：

    <asp:Content ID="PageContentBody" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
            <div class="container mt-3 bg-white form-group fieldGroup">
        <div class="input-group">
            <select name="selectType" class="form-control">
            <option value="0">-- SELECT TYPE --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectDesc" class="form-control">
            <option value="0">-- SELECT DESCRIPTION --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectPPE" class="form-control">
            <option value="0">-- SELECT PPE #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectAsset" class="form-control">
            <option value="0">-- SELECT ASSET #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectSerial" class="form-control">
            <option value="0">-- SELECT SERIAL #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> +</a>
            </div>
        </div>
    </div>

        <asp:Button ID="Button1"  ClientIDMode="Static" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="Button1_Click" />
</asp:Content>

这是我用来动态生成字段的部分代码，基本上它是一个隐藏的div。我的 JQuery “复制”它以生成新的字段行到表单并可能是问题的根源：

<asp:Content ContentPlaceHolderID="BodyScripts" runat="server">
       <!-- copy of input fields group -->
    <div class="container mt-3 bg-white form-group fieldGroupCopy" style="display: none;">
        <div class="input-group">
            <select name="selectType" class="form-control">
            <option value="0">-- SELECT TYPE --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectDesc" class="form-control">
            <option value="0">-- SELECT DESCRIPTION --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectPPE" class="form-control">
            <option value="0">-- SELECT PPE #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectAsset" class="form-control">
            <option value="0">-- SELECT ASSET #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectSerial" class="form-control">
            <option value="0">-- SELECT SERIAL #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> -</a>
            </div>
        </div>
    </div>

这是我用来复制/生成附加选择字段的代码，也可能是我的问题的另一个来源，所以我把它放在这里：

 $(document).ready(function(){
        //group add limit
        var maxGroup = 10;
        var ctr = 0

        //add more fields group
        $(".addMore").click(function(){
            if($('body').find('.fieldGroup').length < maxGroup){
                var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                $('body').find('.fieldGroup:last').after(fieldHTML);
            }else{
                alert('Maximum '+maxGroup+' groups are allowed.');
            }
        });

        //remove fields group
        $("body").on("click",".remove",function(){ 
            $(this).parents(".fieldGroup").remove();
        });
    });

最后，我正在使用的验证方法。如果页面中的每个选择标记的值为 0，则禁用按钮。否则，如果每个选择标记的值不是 0，则启用按钮：

        function buttonState(){
    $("select").each(function(){
        $('#Button1').attr('disabled', 'disabled');
        if($(this).val() == "0" ) return false;
        $('#Button1').attr('disabled', '');
    })
}

$(function(){
    $('#Button1').attr('disabled', 'disabled');
    $('select').change(buttonState);
})

我究竟做错了什么？有没有更好的方法呢？

标签： javascriptjqueryhtmlasp.netvb.net