如果输入的值小于最小投标金额,如何禁用按钮单击

How to disable button click if value inputed is less than Minimum bid amount?

本文关键字:金额 何禁用 单击 按钮 输入 小于 如果      更新时间:2023-10-21

如果在下面名为"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 />

`

使用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');
      }
    });

您将bidamt文本框放在foreach循环中,然后设置id="bidamt"。所以问题是不能设置相同的id-many元素,id是唯一的。第二个问题是您在按钮的点击事件中调用了checkBids功能,所以您无法获得按钮的值。