为选定的复选框验证 Gridview 中的文本框答案

【问题标题】：Validate Text box in a Gridview for the selected checkBox为选定的复选框验证 Gridview 中的文本框
【发布时间】：2017-02-27 19:26:57
【问题描述】：

谁能帮我解决以下问题。

我有一个由 4 列组成的网格视图。

column 1 - Item-template 是检查行的复选框

column 2 - Item-template 是一个标签字段，用于显示序列号

第 3 列 - 项目模板是标签字段以显示描述

column 4 - Item-template 是一个文本框，允许用户在网格中输入数量值。

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

这是我的网格视图。

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

【问题讨论】：

标签： javascript c# jquery asp.net

【解决方案1】：

这是一个sn-p，它为@ 987654321添加侦听器，然后检查复选框时，它将在同一行中验证值的文本框。

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

【讨论】：

【解决方案2】：

鉴于您的 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 所看到的。

【讨论】：