限制一次预订的座位数量

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 标记中被默认禁用。

Answer 2

没有 jquery

document.addEventListener("DOMContentLoaded", function() {

    const selections      = {};
    const inputElems      = document.querySelectorAll('input[type=checkbox]');
    const reserveButton   = document.getElementById('reserveButton');
    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++) {

        inputElems[i].addEventListener("click", displayCheck);

    }

    function displayCheck(e) {


        if (e.target.checked) {

            if (Object.keys(selections).length >= 6) {

                e.preventDefault();
                alert('You can only reserve 6 seats at time');
                return;

            } else {

                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);
        }

        result.length ? reserveButton.disabled = false : reserveButton.disabled = true;

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

<html>
<head>
</head>
<body>

<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" id="reserveButton" disabled>Reserve Now</button>
    </p>
  </form>
</div>

</body>
</html>

Answer 3

当e.target.checked 为true 时，您可以检查selections 是否包含超过6 个键。

要停用/激活按钮，您可以这样做

reserveBtn.disabled = result.length == 0;

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");

const reserveBtn = document.getElementById("reserve-button");

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) {
    if(Object.keys(selections).length>=6)
    { 
      e.target.checked = false;
      // alert goes here
      // ...
      return; 
    }
    
    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;
  
  reserveBtn.disabled = result.length == 0;
}

<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" id="reserve-button" disabled>Reserve Now</button>
    </p>
  </form>
</div>
</body>

</html>