保持按钮处于禁用状态,直到满足特定条件

时间:2018-06-20 10:13:46

标签: jquery asp.net

我有5个asp:TextBox,其中4个值的总和不得超过第5个文本框的值。在此之前,提交按钮必须保持禁用状态。

这里是控件

<td>
    <asp:TextBox ID="txtTotalSecurityDeposit" MaxLength="9" runat="server" onkeypress="return isNumber(event)" onfocus="words.innerHTML=convertNumberToWords(this.value)" onkeyup="words.innerHTML=convertNumberToWords(this.value)" onfocusout="myFunctionn()"></asp:TextBox>
                </td>

 <td style="width: 100px">

                <asp:TextBox class ="input" ID="txtAmount_VH" MaxLength="9" runat="server" Width="100px" Style="text-align: right" onkeypress="return isNumber(event)" onfocus="words.innerHTML=convertNumberToWords(this.value)" onkeyup="words.innerHTML=convertNumberToWords(this.value)" onfocusout="myFunctionn()"></asp:TextBox>
            </td>
            <td style="width: 100px">

                <asp:TextBox class ="input" ID="txtAmount_MX" MaxLength="9" runat="server" Width="100px" Style="text-align: right" onkeypress="return isNumber(event)" onfocus="words.innerHTML=convertNumberToWords(this.value)" onkeyup="words.innerHTML=convertNumberToWords(this.value)" onfocusout="myFunctionn()"></asp:TextBox>
            </td>
            <td style="width: 100px">

                <asp:TextBox class ="input" ID="txtAmount_OB" MaxLength="9" runat="server" Width="100px" Style="text-align: right" onkeypress="return isNumber(event)" onfocus="words.innerHTML=convertNumberToWords(this.value)" onkeyup="words.innerHTML=convertNumberToWords(this.value)" onfocusout="myFunctionn()"></asp:TextBox>
            </td>
            <td style="width: 100px">

                <asp:TextBox class ="input" ID="txtAmount_SP" MaxLength="9" runat="server" Width="100px" Style="text-align: right" onkeypress="return isNumber(event)" onfocus="words.innerHTML=convertNumberToWords(this.value)" onkeyup="words.innerHTML=convertNumberToWords(this.value)" onfocusout="myFunctionn()"></asp:TextBox>
            </td>
<td style="text-align: right">
                <asp:Button ID="btnAddAmount" runat="server" Text="Add" Width="92px" />
            </td>

这是jQuery函数。

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

    <script type ="text/javascript">
        $(document).ready(function () {
            $('.input').on('keyup', function () {
                $vhamnt = $('#<%=txtAmount_VH%>').val();
                $mxamnt = $('#<%=txtAmount_MX%>').val();
                $obamnt = $('#<%=txtAmount_OB%>').val();
                $spamnt = $('#<%=txtAmount_SP%>').val();
                $totamnt = $('#<%=txtTotalSecurityDeposit%>').val();

                $sum = $vhamnt + $mxamnt + $obamnt + $spamnt;
                If(parseInt($sum) > parseInt($totamnt)) Then {
                    $('#<%=btnAddAmount.ClientID%>').attr("disabled", "disabled");
                }
            });
        });

    </script>

Chrome的控制台也没有提供任何线索。

2 个答案:

答案 0 :(得分:0)

  1. 创建一个将保留您的逻辑的函数。
  2. 从每个文本框onblur事件中调用该函数。

答案 1 :(得分:0)

在mvc razor中测试了您的代码,在 JS代码中进行了很少的更改,它对我有用。

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

    <script type ="text/javascript">
        $(document).ready(function () {
            $('.input').on('keyup', function () {
                $vhamnt = $('#txtAmount_VH').val();
                $mxamnt = $('#txtAmount_MX').val();
                $obamnt = $('#txtAmount_OB').val();
                $spamnt = $('#txtAmount_SP').val();
                $totamnt = $('#txtTotalSecurityDeposit').val();

                $sum = $vhamnt + $mxamnt + $obamnt + $spamnt;
                If(parseInt($sum) > parseInt($totamnt)) Then {
                    $('#btnAddAmount').attr("disabled", "disabled");
                }
            });
        });

    </script>