以后选择时如何禁用下一个选择?

时间:2019-05-29 07:46:11

标签: jquery

所以我想禁用形式b,c,d,e,f,g,然后选择val为“ after”的a 而且当我用val“ after”选择b时,c,d,e,f,g将被禁用 当我选择val为“之后”的e时,则f将禁用g

例如:之后    b:val之后且已禁用    c:val之后且已禁用 如果a:之前    b:值为零且未禁用    c:值为零且未禁用 我不知道

其模板jquery

<script type="text/template" id="long-duration-template">
    <div class='appended-field row'>
    <div class="col-12 col-sm-4">
    </div>

    <div class="col-12 col-sm-4">
        <div class="form-group">
        <label>Before / After</label>
        <select name="paymentTime" class="form-control time-payment-set">
            <option value="before">Before</option> 
            <option value="after">After</option>
        </select>
        </div>
    </div>

    <div class="col-12 col-sm-4">
        <div class="form-group">
        <label>Due Date</label>
        <input class="form-control" type="number" maxlength="2">
        </div>
    </div>
    </div>
</script>

那么这是附加模板的

$('#input-credit-tenor').on('keyup change input cut paste', function () {
    var longDuration = $(this).val();

    if (longDuration > 12) {
      longDuration = 12;
    } else {
      longDuration -= 1;
    }

    var $currentFields = $('.display-credit-total').find('.appended-field');
    var totalFields = $currentFields.length;

    if (totalFields > longDuration) {
      $currentFields.filter(':eq(' + longDuration + '), :gt(' + (longDuration - 1) + ')').remove();
    } else {
      for (var i = 0; i < longDuration - totalFields; i++) {
        $('.display-credit-total').append($('#long-duration-template').html());
      } 
    }
  });

这就是禁用的功能

$('.time-payment-set').change(function(){
    var valueSelectCustom = $(this).val()
    switch(valueSelectCustom){
      case 'after':
        $(this).closest('.display-credit-total').next().find('.time-payment-select').prop('disabled', true);
        break;
      default:
        $('.time-payment-select').attr('disabled', false);
    }
  })

inpur

<div class="col-12 col-sm-4">
 <div class="form-group">
    <label>Credit Tenor</label>
    <input class="form-control creditPayCustom" id="input-credit-tenor" type="number" maxlength="2">
    <label style="color: red; font-size: 10px; display: none;" id="total-credit-tenor">Can't more than 12</label>
 </div>
</div>
    ```

0 个答案:

没有答案