javascript - 基于比较 c# 中 gridview 的文本框值来启用或禁用按钮

Question

嗨，我是 javascript 和 c# 新手。如果我有任何错误，请纠正我。

这是我的gridview代码。

     <asp:GridView ID="GridView1" CssClass="table table-hover table-bordered" runat="server" AutoGenerateColumns="False" ShowFooter="True" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowCommand="GridView1_RowCommand">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
          <asp:BoundField DataField="AvlQty" HeaderText="Available" ItemStyle-Width="35" >
<ItemStyle Width="35px"></ItemStyle>
            </asp:BoundField>


<asp:TemplateField HeaderText="Qty" ItemStyle-Width="70">
                <ItemTemplate>                
                    <asp:TextBox ID="TextBoxQty" onkeyup="Calculation(this)" CssClass="txtQty" runat="server" Text='<%# Eval("SelQty") %>' MaxLength="5" Width="45"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBoxQty" Display="Dynamic" ForeColor="Red" ErrorMessage="RequiredFieldValidator">*</asp:RequiredFieldValidator>
                 <asp:regularexpressionvalidator ID="revAvailablePeriod" runat="server" ErrorMessage="Must > 0" ForeColor="Red" controltovalidate="TextBoxQty" validationexpression="^[1-9][0-9]*(\.[0-9]+)?|0+\.[0-9]*[1-9][0-9]*$" setfocusonerror="true" validationgroup="AddAssests" xmlns:asp="#unknown"></asp:regularexpressionvalidator>
              <asp:CompareValidator ID="CompareValidator1" runat="server" ValueToCompare='<%# Eval("AvlQty") %>' ControlToValidate="TextBoxQty" ForeColor="Red"
ErrorMessage="Must < Available" Operator="LessThan" Type="Integer"></asp:CompareValidator>

                </ItemTemplate>

<ItemStyle Width="70px"></ItemStyle>
            </asp:TemplateField>
</Columns> 
</asp:GridView>

<asp:Button ID="Button2" runat="server" Enabled="false" Text="Place Order >>" CssClass="btn btn-info" OnClick="Button2_Click" />

现在，如果数量大于gridview每行的可用数量，则应禁用按钮，否则应启用按钮。

我想使用 JavaScript 函数来实现它。任何人都可以帮我解决这个问题吗？

我写了这个函数，但不知道何时调用以及如何调用..这就是我到目前为止所做的..

 function Calculation() 
 {
   var grid = document.getElementById("<%= GridView1.ClientID%>");
         var counter = 0;
         for (var i = 1; i < grid.rows.length ; i++) {
             var txtAvl = grid.rows[i].cells[3];

             var qty = grid.rows[i].cells[5];
             if (txtAvl.value >= qty.value && qty.value > 0)
             { counter++; }
             else
             { document.getElementById('Button2').disabled = true; }

         }
         if (counter == grid.rows.length)
             document.getElementById('Button2').disabled = false;

 } 

Answer 1

onkeyup 函数足以调用此 javascript 验证。我稍微改变了你的脚本及其工作原理。

<script type="text/javascript">
        function Calculation() {
            var grid = document.getElementById('GridView1');
            var counter = 0;

            for (var i = 1; i < grid.rows.length; i++) {

                var txtQty = document.getElementById('GridView1_ctl0' + (i + 1) + '_TextBoxQty'); //TextBox control

                if (txtQty != undefined) {

                    var qty = txtQty.value;
                    var txtAvl = grid.rows[i].cells[0].innerHTML;

                    if (txtAvl >= qty && qty > 0) {
                        counter++;
                    }
                    else {
                        document.getElementById('Button2').disabled = true;
                        break;
                    }
                }
            }
            if (counter == grid.rows.length - 2)
                document.getElementById('Button2').disabled = false;
        } 
    </script>

您必须相应地使用 Gridview 和 TextBox 的正确 ID 进行更新。希望这会有所帮助。