主页 / 问题 / 845234
Accepted
Nice
Asked:2020-06-22 14:56:33 +0800 CST2020-06-22 14:56:33 +0800 CST

jQuery条件不起作用

  • 772

根据第一个值val，一切正常，但Quantity-8不再正常。有什么问题？

然而，如何从月份的选择方面做出相同的条件？例如，选择optioncvalue === '3months'并使非活动optioncvalue等于Quantity-4和Quantity-8

$('#quantity').change(function() {
  if ($(this).val() === 'Quantity-4' && 'Quantity-8') {
    $('#3mon').attr('disabled', true);
  } else {
    $('#3mon').attr('disabled', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity">
    <option value="0"></option>
    <option value="Quantity-4">4 lessons</option>
    <option value="Quantity-8">8 lessons</option>
    <option value="Quantity-12">12 lessons</option>
    <option value="Quantity-36">36 lessons</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0"></option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>

jquery

3 个回答

  1. Best Answer

    这是一个可以选择培训时间的选项，在讲完课后，我代表我自己想说的是，如果可能（如您的情况），最好只使用数值​​​​在选择中，即 一起：1 个月和 3 个月，只有 1 和 3，还有 select where id="quantity"：

    $(document).on('change', '#validity', function() {
  $('#quantity').prop('disabled', false); // делаем активным выбор уроков
  $('#quantity option').removeAttr('disabled'); // очищаем все элементы
  $('#quantity').val('0'); // сбрасываем значение селекта
  
  if ($(this).val() == '1') { // и блокируем элементы
    $('#quantity option[value="12"], #quantity option[value="36"]').attr('disabled', '');
  } else {
    $('#quantity option[value="4"], #quantity option[value="8"]').attr('disabled', '');
  }  
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0" selected="" disabled="">How much will we learn?</option>
    <option value="1">One month</option>
    <option value="3">Three months</option>
  </select>
</div>

<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity" disabled="">
    <option value="0" selected="" disabled="">Select lesson</option>
    <option value="4">4 lessons</option>
    <option value="8">8 lessons</option>
    <option value="12">12 lessons</option>
    <option value="36">36 lessons</option>
  </select>
</div>

    • 1 

  2. $('#quantity').change(function() {
  if ($(this).val() === 'Quantity-4' || $(this).val() === 'Quantity-8') {
    $('#3mon').attr('disabled', true);
  } else {
    $('#3mon').attr('disabled', false);
  }
});

$('#validity').change(function() {
  if ($(this).val() === '3months') {
    $('option[value="Quantity-4"], option[value="Quantity-8"]').attr('disabled', true);
  } else {
    $('#quantity option[value="Quantity-4"], option[value="Quantity-8"]').attr('disabled', false);
  }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity">
    <option value="0"></option>
    <option value="Quantity-4">4 lessons</option>
    <option value="Quantity-8">8 lessons</option>
    <option value="Quantity-12">12 lessons</option>
    <option value="Quantity-36">36 lessons</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0"></option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>

    • 0

  3. 你在条件上犯了一个错误，所以它会更正确：

    $('#quantity').change(function() {
  var val = $(this).val();
  $('#validity option').removeAttr('disabled');
  if (val === 'Quantity-4' || val === 'Quantity-8') {
    $('#3mon').attr('disabled', true);
  } else {
    $('#1mon').attr('disabled', true);
  }
});
    По первому значению val всё срабатывает как надо,
а Quantity-8 уже нет. В чем ошибка может быть? И еще - как сделать такое же условие,
но уже со стороны выбора месяца? Например выбираем option c value==='3months' и становятся неактивными option c value Quantity-4 иQuantity-8
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity">
    <option value="0"></option>
    <option value="Quantity-4">4 lessons</option>
    <option value="Quantity-8">8 lessons</option>
    <option value="Quantity-12">12 lessons</option>
    <option value="Quantity-36">36 lessons</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0"></option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>

    • 0

相关问题