如果输入数量高于隐藏输入，则启用/禁用提交按钮[重复]

Question

我正在制作一个表单，允许用户在拍卖中出价。该表单运行良好，但如果出价高于用户余额，我想禁用提交按钮。

示例：如果用户余额为 20，则用户的出价不能超过其余额。

我试过这段代码：

<form class="auction_form cart" method="post" enctype="multipart/form-data" data-product_id="906">


        <input type="hidden" name="bid" value="906">    

            <div class="quantity buttons_added">
                                <input type="hidden" id="balance" value="5">

                <input type="number" id="bid_value" name="bid_value" data-auction-id="906" size="7" title="bid" class="input-text qty  bid text left">

            </div>  
        <button type="submit" class="bid_button button alt">Faire une offre</button>

        <input type="hidden" name="place-bid" value="906">
        <input type="hidden" name="product_id" value="906">
                        <input type="hidden" name="user_id" value="1">

                </form>

<script>
$(document).on('input', '#bid_value', function(){
                    if ($(this).val() >= $('#balance').val() ) {
                        $('.bid_button').prop('disabled', true);
                    } else {
                        $('.bid_button').prop('disabled', false);
                    }
                });
</script>

它似乎运作良好，但在这种情况下，按钮从 10 开始保持启用...

我不知道我错过了什么，你能帮我吗？！

谢谢

Answer 1

因为您期待10 > 2，但实际上您正在比较返回false 的"10" > "2"。将它们解析为整数，然后进行比较。

var balance = parseInt($('#balance').val());
var bid = parseInt($(this).val());
if ( bid >= balance ) {
    //...