Question

我正在尝试建立一个票务系统，该系统将允许从3个年龄段（2-12岁，12-18岁，18岁以上）中选择最多4个人（在这种情况下为儿童）不同的选择框：

<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 Fiddle

基本上可以，问题是即使其他输入仍加起来为4，仍然允许第一个增量。

Answer 1

有两种方法可以解决此问题，第二种方法提供较少的javascript。

第一个是将更改事件附加到每个选择，并保持当前选择的连续计数。如果当前更改将使您的运行计数达到最高，那么您可以立即将其取消，然后通过preventDefault取消（否则将其撤消）。请记住，为了在默认html中进行多重选择而没有任何种类的selectpicker库，您必须在select元素中包含'multiple'属性。此外，您的用户还将按住ctrl按钮进行多项选择。

第二个可能更清晰的选项是使用选项组，这样您只需要一个选择即可，而无需多个选择。每个组都是年龄段。同样，您可能需要做一些JavaScript才能手动检查，但至少要少一些。

Answer 2

下面的代码是一个好的开始。当前，它仅通过重置其他选项从第一个选择到最后一个选择/输入。

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>

总共限制3个选择的最大值

2 个答案: