时间戳

首页 > 解决方案 > 限制最大值共 3 个选择

jquery - 限制最大值共 3 个选择

问题描述

我正在尝试构建一个票务系统，该系统最多允许从 3 个年龄组（2-12、12-18、18+）中选择最多 4 人（在这种情况下为孩子），这些年龄组显示在 3 个不同的选择框中：

<div class="selects">
  <div class="select-one select-box">
    <label>Kids Ages 2-12</label>
    <select id="kids1">
      <option value="0">--select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
  <div class="select-two select-box">
    <label>Kids Ages 12-18</label>
    <select id="kids2">
      <option value="0">--select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
  <div class="select-three select-box">
    <label>Kids Ages 18+</label>
    <select id="kids3">
      <option value="0">--select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <div class="error-box">
    </div>
  </div>
</div>

每个框最初有 4 个选项，但随着过程的进行，我自然想限制选择：如果在某个选择框中选择了 2 个孩子，那么在接下来的 2 个选择框中，你不能选择超过 2 个孩子，等等

在第一个选择框中选择“1”后，我开始尝试禁用第二个和第三个选择框中的选项：

$("#kids1").change(function() {
  var kidsOne = $(this).val();
  if (kidsOne === "1") {
    $("#kids2").children('option:gt(3)').prop('disabled', true);
    $("#kids3").children('option:gt(3)').prop('disabled', true);
  } else {
    $("#kids2").children('option:gt(1)').prop('disabled', false);
    $("#kids3").children('option:gt(1)').prop('disabled', false);
  }
}).change();

但后来我明白，当我进入下一个盒子时，这将是地狱。所以我认为最好的方法是设置所有值的最大值，并以此设置限制。但我不确定如何。

编辑：

我已将选择更改为输入数字，并尝试根据其他输入值和最大 4 限制每个更改的输入：

HTML：

<label>Kids Ages 2-12</label> <input class="qty" type="number" value="0" min="0" max="4" id="kids1"><br>
<label>Kids Ages 12-18</label> <input class="qty" type="number" value="0" min="0" max="4" id="kids2"><br>
<label>Kids Ages 18+</label> <input class="qty" type="number" value="0" min="0" max="4" id="kids3"><br>

jQuery：

$(document).on("change", ".qty", function() {
  var sum = 0;
  $(".qty").each(function() {
    sum += +$(this).val();
  });
  var thisSum = $(this).val();
  var sumOthers = parseInt(sum) - (thisSum);
  var limitMax = parseInt(4) - (sumOthers);
  $(this).attr("max", limitMax);
});

JS小提琴

它基本上可以工作，问题是即使其他输入仍然总计为 4，它仍然允许第一个增量。有什么想法吗？

标签： jquery

解决方案

下面的代码是一个好的开始。目前它只能通过重置其他人从第一个到最后一个选择/输入。

var total = 0;
var max = 4;
$('#total span').html(total);

$('#kids1').on('change', function() {
  var kids1 = parseInt($(this).val());
  let allowed = max - kids1;

  $('#kids2').val(0).attr('max', allowed);
  $('#kids3').val(0).attr('max', allowed);

  total = kids1;
  $('#total span').html(total);
});

$('#kids2').on('change', function() {
  var kids1 = parseInt($('#kids1').val());
  var kids2 = parseInt($(this).val());
  let allowed = max - (kids1 + kids2)

  $('#kids3').val(0).attr('max', allowed);

  total = kids1 + kids2
  $('#total span').html(total);
});
label {
  width: 125px;
  display: inline-block;
}

input {
  padding: 3px;
}

#total {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Kids Ages 2-12</label> <input type="number" value="0" min="0" max="4" id="kids1"><br>
<label>Kids Ages 12-18</label> <input type="number" value="0" min="0" max="4" id="kids2"><br>
<label>Kids Ages 18+</label> <input type="number" value="0" min="0" max="4" id="kids3"><br>
<div id="total">
  Total: <span></span>
</div>

推荐阅读