Question

任何人都可以通过以下查询帮助我。

我有一个包含4列的gridview。

第1列 - 项目模板是用于检查行

的复选框

第2列 - 项目模板是用于显示序列号的标签

第3列 - 项目模板是标签，用于显示说明

第4栏 - 项目模板是一个文本框，允许用户在网格中输入数量值。

当我检查网格中的一行时，我想验证此行的相应文本框，它不应为空。我发现脚本要检查至少应该在网格中检查一个复选框，但我想验证选中复选框的文本框。

这是我的gridview。

<asp:GridView ID="grdtest1" runat="server" CssClass="table table-striped table-hover table-responsive table-condensed" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="Select">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText=" slNumber">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="serialNumber" Text='<%# Eval("SL_NUMBER").ToString()%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText=" Description">
                    <ItemTemplate>
                        <%# Eval("Description").ToString()%>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <asp:TextBox ID="txtQuantity" CssClass="form-control input-sm" runat="server"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Answer 1

鉴于您的Gridview，您可以执行以下操作:(注释以供解释）

//On the change of a checkbox within a table-cell
$("table tbody tr td input[type='checkbox']").on("change", function() {

    var $t = $(this);

    //If checkbox is checked
    if ($t.is(":checked")) {

        //Get its parent row
        var $row = $(this).closest("tr");

        //Look for a textbox within that row
        var $textbox = $row.find("input[type='text']").first();

        //Check if that textbox empty
        if (!$textbox.val().trim().length) {
            //TEXTBOX IS EMPTY
            alert("Textbox is empty.");
        }

    }

});

作为一条建议，在使用JavaScript和ASP时，使用呈现的HTML而不是ASP本身总是更容易，就像JavaScript所看到的一样。

Answer 2

这是一个向GridView1添加侦听器的片段，然后当选中复选框时，它将验证同一行中的TextBox是否为值。

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= GridView1.ClientID %> input[type=checkbox]').change(function () {
            if ($(this).prop('checked') == true) {
                var txt = $(this).closest('tr').find('input[type=text]');
                if (txt.val() == "") {

                    //textbox is empty
                    txt.attr('style', 'background-color:red');

                }
            }    
        });
    });
</script>

在Gridview中验证所选复选框

2 个答案: