如果输入的值小于最低出价金额,如何禁用按钮点击?

时间:2013-11-27 00:51:53

标签: javascript jquery html asp.net-mvc-4

如果在下面名为“bidamt”的文本框中输入的值小于下表中的最小出价值,我希望能够禁用按钮点击。我该怎么做呢?我试图在JavaScript中这样做但它似乎没有拉出最低出价值。任何帮助将不胜感激。

      @model IList<NucorPrototypes_V1.ViewModel.AuctionPage>

      @{
          ViewBag.Title = "MyBids";

       }

      <!doctype html>
       <html>
       <head>
<title>Auction </title>
<script type="text/javascript">

    function checkBids(el) {
        var bidInput = el.value
        var MinBid = confirmbids.MinBid.value
        if (el.value <= MinBid) {
            document.getElementById("Bid").disabled = true;
        }
        else {
            document.getElementById("Bid").disabled = false;
        }
    }


    function RemoveBid(rb) {
        if (typeof (rb) == "object") {
            $(rb).closest("tr").remove();
        }

    }


</script>
 @*<script type="text/javascript">

   $('#bidamt').bind('keyup', function () {
       if (Filled()) $('#btnSubmit').removeAttr('disabled');
   });

   function Filled() {
       var filled = true;
       $('body input').each(function () {
           if ($(this).val() == '0') filled = false;
       });
       return filled;
   }

       *@
      @*<script type="text/javascript">

       //Validates that textbox value entered is a number or a number with a decimal
       function checkDec(el) {
           var typedBid = el.value
           var min = confirmbids.MinBid.value

           if (el.value <= confirmbids.MinBid.value) {
               //alert("Invalid Bid Amount. Please enter a correct bid amount.");
               document.getElementByName("Bid").disabled = true;
           }
           else {
               document.getElementById("message").innerHTML = 'Your Bid is ' + el.value;
               document.getElementByName("Bid").disabled = false;
           }
       }

* @

      <body>
        <div id="header" style="background-color: #008751">
        <h1 style="margin-bottom: 0; color: #FFFFFF">Secondary Coil Auction</h1>
      </div>
         <br />

          <div id="content">

    <center>
    <h4>In order to confirm bid you must enter a Bid Amount or Remove Bid before clicking Confirm.</h4>

   @*Table that populates with bids the user selects. Here they can place a bid and           remove a bid.*@


<form method="post" id="confirmbids" action="PlaceBid">
    <table id="myTable1" border="2" style="background-color: #B0B0B0" cellpadding="10" class="table">
        <tr>
            <th>Bid Amount per 100 Weight</th>
            <th>Remove Bid</th>
            <th>Serial Number</th>
            <th>Minimum Bid</th>
            <th>Current High Bid</th>
            <th>Grade</th>
            <th>Heat Number</th>
            <th>Gauge</th>
            <th>Width</th>
            <th>Weight</th>
            <th>Defect 1</th>
            <th>Defect 2</th>
            <th>Defect 3</th>
        </tr>



        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <input type="text" @*pattern="[0-9]+([\.|,][0-9]+)?" step="0.01"*@ name="bidamt" onkeyup="checkDec(this);" id="bidamt"  />
                </td>
                <td>
                    <input type="button" value="Remove Bid" id="removeme" onclick="RemoveBid(this);"/>
                </td>                    
                <td>
                    <input type="text" style="background-color: #B0B0B0" readonly="true" name="coilID" value="@item.Coil_ID" />                  
                </td>
                <td>
                    <input type="text" style="background-color: #B0B0B0" readonly="true" name="MinBid" value="@item.Auc_MinBid" />  
                    @*@Html.DisplayFor(modelItem => item.Auc_MinBid)*@
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.HighBid)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Grade)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_HeatNo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Gauge)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Width)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Weight, new { @id = "CoilWeight" })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Defect1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Defect2)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Coil_Defect3)
                </td>

            </tr>
        }

    </table>
    <center><input type="submit" name="Bid" id="Bid" onclick="checkBids(this)" value="Confirm Bids" />
    </form>
    <br />
    </center>
</div>
<center>

<div class="well">
    <div id="message"></div>     
</div>


</center>
<br />
<br />

`

2 个答案:

答案 0 :(得分:0)

使用jquery你可以试试这个: 要使用jquery,你只需嵌入

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

在你的html文件的head标签上。并将其放在点击事件上。

$("#Bid").attr('disabled','disabled');
像这样:

$("#Bid").click(function(){
      if(something true){
       $(this).attr('disabled','disabled');
      }
    });

答案 1 :(得分:0)

您将bidamt文本框放在foreach循环中,并设置id =“bidamt”。所以问题是你不能设置相同的id很多元素,id是唯一的。第二个问题是你在按钮的点击事件上调用checkBids函数,所以你无法获得按钮的值。