其他字段條件下的jQuery最大值輸入字段

Question

有兩個字段，如果第一個字段為discountType和discountAmount 。 我要實現的目標是：如果discountType等於percentage則輸入的discountAmount僅接受0到100之間的數字。如果discountType等於absolute應該在discountAmount接受任何數字。

我在這里和這里已經閱讀了兩個類似的問題，並嘗試使用prop()和attr()方法，但均未成功。

我的代碼當前看起來像這樣（帶有.prop() ）：

HTML

<div class="container">
   <div class="form-group">
      <label class="form-control-label required" for="coupon_discountType">Discount type
      </label>
      <select id="coupon_discountType" name="coupon[discountType]" class="form-control">
         <option value="percentage">percentage</option>
         <option value="absolute">absolute</option>
      </select>
   </div>
   <div>
      <label for="coupon_discountAmount" class="form-control-label required">Amount
      </label>
      <div class="input-group">
         <div class="input-group-prepend" id="absolute">
            <span class="input-group-text">€</span>
         </div>
         <input type="text" id="coupon_discountAmount" name="coupon[discountAmount]" required="required" class="form-control" />
         <div class="input-group-append" id="percentage">
            <span class="input-group-text">%</span>
         </div>
      </div>
   </div>
</div>

jQuery的

$("#coupon_discountType").change(function() {
    if($(this).val() === 'percentage') {
        $("#coupon_discountAmount").prop('max', 100);
        $('#absolute').hide();
    }
    else {
        $('#absolute').show();
    }
    if($(this).val() === 'absolute') {
        $('#percentage').hide();
    }
    else {
        $('#percentage').show();
    }
}).change(); 

或JSFiddle

Answer 1

我更喜歡輸入事件而不是更改 。 您可以創建一個函數來檢查元素的值 。 如果該值不在該范圍內，則可以從該值中刪除最后一個字符。

工作代碼示例 ：

 $('body').on('input', '#coupon_discountType, #coupon_discountAmount',function(e) { if(e.target.id == 'coupon_discountType') $('#coupon_discountAmount').val(''); if($('#coupon_discountType').val() === 'percentage') { $('#absolute').hide(); checkValue(); } else { $('#absolute').show(); } if($(this).val() === 'absolute') { $('#percentage').hide(); } else { $('#percentage').show(); } }); $('#coupon_discountType').trigger('input'); function checkValue(){ var re = /^\\d+$/; var s = $('#coupon_discountAmount').val(); if (!(re.test(s) && s >= 0 && s <= 100)) { //check if not number and not in the range of 0-100 if(s.trim() != '') //check if any value present $('#coupon_discountAmount').val(s.slice(0, -1)); //reset the value by removing the last character } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="form-group"> <label class="form-control-label required" for="coupon_discountType">Discount type </label> <select id="coupon_discountType" name="coupon[discountType]" class="form-control"> <option value="percentage">percentage</option> <option value="absolute">absolute</option> </select> </div> <div> <label for="coupon_discountAmount" class="form-control-label required">Amount </label> <div class="input-group"> <div class="input-group-prepend" id="absolute"> <span class="input-group-text">€</span> </div> <input id="coupon_discountAmount" name="coupon[discountAmount]" required="required" class="form-control" /> <div class="input-group-append" id="percentage"> <span class="input-group-text">%</span> </div> </div> </div> </div> 

Answer 2

看下面的JSFIDDLE：

01） 以輸入類型作為數字的小提琴
02） 以輸入類型作為文本的小提琴

JS代碼 ：

在下面的代碼中，檢查了“ coupon_discountAmount”字段是否具有屬性“ max”或“ min”。 如果存在它們並且輸入的值不在“ max”或“ min”的指定范圍內，則只需將“ coupon_discountAmount”中的值更改為相應的“ max”或“ min”值。

$("#coupon_discountAmount").change(function(event){
    // restricting to max value specified
    if( typeof $(this).attr('max') != 'undefined' ) {
        if( !isNaN($(this).val()) && (parseInt($(this).val()) > $(this).attr('max')) ) {
            $(this).val($(this).attr('max'));
        }
    }
    // restricting to min value specified
    if( typeof $(this).attr('min') != 'undefined' ) {
        if( !isNaN($(this).val()) && (parseInt($(this).val()) < $(this).attr('min')) ) {
            $(this).val($(this).attr('min'));
        }
    }
});

希望我能在這里，這就是您在尋找答案的內容。