验证Gridview中选定复选框的文本框

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>