javascript - 限制一次预订的座位数量

Question

我有一张用于订票的简单表格。它工作正常，但我想改进它，以便用户可以一次预订 6 个座位，如果用户需要添加第 7 个座位，则应提醒他/她可以一次预订 6 个座位。

另一个问题是如何在没有选择任何座位的情况下使预订按钮处于非事件状态，并在选择一个或多个座位时使其处于事件状态？

const selections = {};
const inputElems = document.getElementsByTagName("input");
const totalElem = document.getElementById("total-container");
const hiddenTotalElem = document.getElementById("hidden-total");
const hiddenSeatElem = document.getElementById("hidden-seats");
const seatsElem = document.getElementById("selected-seats");

for (let i = 0; i < inputElems.length; i++) {
  if (inputElems[i].type === "checkbox") {
    inputElems[i].addEventListener("click", displayCheck);
  }
}

function displayCheck(e) {
  if (e.target.checked) {
    selections[e.target.id] = {
      id: e.target.id,
      value: e.target.value
    };
  } else {
    delete selections[e.target.id];
  }

  const result = [];
  let total = 0;

  for (const key in selections) {
    result.push(selections[key].id);
    total += parseInt(selections[key].value);
  }

  totalElem.innerText = total;
  hiddenTotalElem.value = total;
  seatsElem.innerHTML = result.join(",");
  hiddenSeatElem.value = result;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">

  <h2>Please choose a seat to book</h2>
  <form action="action_page.php" method="post">
    <input type="checkbox" name="vehicle-a1" id="A1" value="100"><label for="A1">A1</label><br>
    <input type="checkbox" name="vehicle-a2" id="A2" value="65"> <label for="A2">A2</label><br>
    <input type="checkbox" name="vehicle-a3" id="A3" value="55"> <label for="A3">A3</label><br>
    <input type="checkbox" name="vehicle-a4" id="A4" value="50"><label for="A4">A4</label><br>
    <input type="checkbox" name="vehicle-b1" id="B1" value="100"><label for="B1">B1</label><br>
    <input type="checkbox" name="vehicle-b2" id="B2" value="65"> <label for="B2">B2</label><br>
    <input type="checkbox" name="vehicle-b3" id="B3" value="55"> <label for="B3">B3</label><br>
    <input type="checkbox" name="vehicle-b4" id="B4" value="50"><label for="B4">B4</label><br>
    <input type="checkbox" name="vehicle-c1" id="C1" value="100"><label for="C1">C1</label><br>
    <input type="checkbox" name="vehicle-c2" id="C2" value="65"> <label for="C2">C2</label><br>
    <input type="checkbox" name="vehicle-c3" id="C3" value="55"> <label for="C3">C3</label><br>
    <input type="checkbox" name="vehicle-c4" id="C4" value="50"><label for="C4">C4</label><br>

    <input type="hidden" name="total" id="hidden-total" value="0">
    <input type="hidden" name="seats" id="hidden-seats" value="0">

    <p id="demo">
      Selected Seat(s)
      <br>
      <span id="selected-seats"></span>
      <!-- container for selected seats -->
      <br> Total: <span id="total-container"></span> USD

      <button type="submit" class="btn btn-primary" name="submit">Reserve Now</button>
    </p>
  </form>
</div>
</body>

</html>

Answer 1

我刚刚添加了一小段代码:

if(result.length>6){
  e.preventDefault();
  console.log("Alreday got 6! Event prevented... Alert the user here.");

  //Remove the property added in selections in the code above.
  delete selections[e.target.id];
  return;
}

如果结果数组超过 6 个项目，您可以阻止选中复选框，以某种方式提醒用户(根据您的喜好)并使用 return 退出该函数。 .

const selections = {};
const inputElems = document.getElementsByTagName("input");
const totalElem = document.getElementById("total-container");
const hiddenTotalElem = document.getElementById("hidden-total");
const hiddenSeatElem = document.getElementById("hidden-seats");
const seatsElem = document.getElementById("selected-seats");

for (let i = 0; i < inputElems.length; i++) {
  if (inputElems[i].type === "checkbox") {
    inputElems[i].addEventListener("click", displayCheck);
  }
}

function displayCheck(e) {
  if (e.target.checked) {
    selections[e.target.id] = {
      id: e.target.id,
      value: e.target.value
    };
  } else {
    delete selections[e.target.id];
  }

  const result = [];
  let total = 0;

  for (const key in selections) {
    result.push(selections[key].id);
    total += parseInt(selections[key].value);
  }
  
  // Enable the submit button if at least 1 checked
  $(":submit").prop("disabled",!result.length>0);
  
  if(result.length>6){
    console.log("Alreday got 6! Event prevented... Alert the user here.");
    e.preventDefault();
    
    // Remove the property added in selections in the code above.
    delete selections[e.target.id];
    return;
  }

  totalElem.innerText = total;
  hiddenTotalElem.value = total;
  seatsElem.innerHTML = result.join(",");
  hiddenSeatElem.value = result;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">

  <h2>Please choose a seat to book</h2>
  <form action="action_page.php" method="post">
    <input type="checkbox" name="vehicle-a1" id="A1" value="100"><label for="A1">A1</label><br>
    <input type="checkbox" name="vehicle-a2" id="A2" value="65"> <label for="A2">A2</label><br>
    <input type="checkbox" name="vehicle-a3" id="A3" value="55"> <label for="A3">A3</label><br>
    <input type="checkbox" name="vehicle-a4" id="A4" value="50"><label for="A4">A4</label><br>
    <input type="checkbox" name="vehicle-b1" id="B1" value="100"><label for="B1">B1</label><br>
    <input type="checkbox" name="vehicle-b2" id="B2" value="65"> <label for="B2">B2</label><br>
    <input type="checkbox" name="vehicle-b3" id="B3" value="55"> <label for="B3">B3</label><br>
    <input type="checkbox" name="vehicle-b4" id="B4" value="50"><label for="B4">B4</label><br>
    <input type="checkbox" name="vehicle-c1" id="C1" value="100"><label for="C1">C1</label><br>
    <input type="checkbox" name="vehicle-c2" id="C2" value="65"> <label for="C2">C2</label><br>
    <input type="checkbox" name="vehicle-c3" id="C3" value="55"> <label for="C3">C3</label><br>
    <input type="checkbox" name="vehicle-c4" id="C4" value="50"><label for="C4">C4</label><br>

    <input type="hidden" name="total" id="hidden-total" value="0">
    <input type="hidden" name="seats" id="hidden-seats" value="0">

    <p id="demo">
      Selected Seat(s)
      <br>
      <span id="selected-seats"></span>
      <!-- container for selected seats -->
      <br> Total: <span id="total-container"></span> USD

      <button type="submit" class="btn btn-primary" name="submit" disabled>Reserve Now</button>
    </p>
  </form>
</div>
</body>

</html>

编辑

为了启用提交按钮，我添加了以下内容:

$(":submit").prop("disabled",!result.length>0);

它在 HTML 标记中默认被禁用。