Question

有两个字段，如果第一个字段为discountType和discountAmount。我想要实现的是：如果discountType等于percentage，则输入discountAmount仅接受0到100之间的数字。如果discountType等于absolute，则任何discountAmount中应接受该数字。

我已经阅读了两个类似的问题here和here，并尝试使用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

我更喜欢 input 事件，而不是 change 事件。您可以创建一个函数来检查元素的 value 。如果该值不在该范围内，则可以从 value 中删除最后一个字符。

工作代码示例：

$('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）Fiddle with input type as number
02）Fiddle with input type as text

JS代码：

在下面的代码中，检查了“ coupon_discountAmount”字段是否具有属性“ max”或“ min”。如果它们存在并且输入的值不在“ max”或“ min”的指定范围内，则只需将“ coupon_discountAmount”中的值更改为相应的“ max”或“ min”值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="lmTag">
  <style>
    .lm-tag {
      display: inline-block;
      padding: 4px;
      border-radius: 4px;
      background-color: #e74c3c;
      color: #ffffff;
      font-size: 12px;
    }

    .lm-tag input {
      border: none;
    }
  </style>
  <span class="lm-tag">
    <input type="text"/>
    <content></content>
  </span>
</template>
<div id="app" class="text-center body">
  <p>
    Binding :value
    <lm-tag :value="input">{{input}}</lm-tag>
  </p>
  <p>
    Binding v-model
    <lm-tag v-model="input">{{input}}</lm-tag>
  </p>
  <p>
    Raw input with :value
    <input type="text" :value="input">
  </p>
  <p>
    Raw input with v-model
    <input type="text" v-model="input">
  </p>
</div>

希望我现在就在这里，这就是您在寻找答案的方式。

其他字段条件下的jQuery最大值输入字段

2 个答案: