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

我有这张简单的桌子用于订票。它工作正常，但我想改进它，这样如果用户需要增加第7个座位，则用户可以一次预订6个座位，应提醒他/她可以同时预订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>

最佳答案

我刚刚添加了一个小的代码块：

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标记中的defaut禁用了此功能。

关于javascript - 限制一次预订的座位数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51867731/