Pizza ordering

by joonas yoon

HTML

<body>
  <div class="actions">
    <input type="radio" name="pizza" onchange="pizzaChoice(0)">
    <input type="radio" name="pizza" onchange="pizzaChoice(1)">
    <input type="radio" name="pizza" onchange="pizzaChoice(2)">
  </div>
  <div class="items">
    <input type="checkbox" id="Avocado">
    <label for="Avocado">Avocado</label>

    <input type="checkbox" id="Lobster">
    <label for="Lobster">Lobster</label>

    <input type="checkbox" id="Tuna">
    <label for="Tuna">Tuna</label>

    <input type="checkbox" id="Oyster">
    <label for="Oyster">Oyster</label>

    <input type="checkbox" id="Salmon">
    <label for="Salmon">Salmon</label>

    <input type="checkbox" id="Bacon">
    <label for="Bacon">Bacon</label>

    <input type="checkbox" id="Duck">
    <label for="Duck">Duck</label>

    <input type="checkbox" id="Sausage">
    <label for="Sausage">Sausage</label>
  </div>
</body>

CSS

.actions, .items {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.items input:disabled {
  background: #eee;
}

JavaScript

function pizzaChoice(menuId) {
  var menu = document.querySelectorAll('input[name="pizza"]');
  
  var toppings = {
  // 'Topping name': [is available on Option1, Option2, Option3]
  	'Avocado': [true, false, false],
    'Tuna': [true, false, true],
    'Duck': [false, false, true],
    'Sausage': [false, false, true],
    'Lobster': [false, true, false],
    'Oyster': [false, true, false],
    'Salmon': [false, true, false],
    'Bacon': [false, true, true]
  };
  
  for (const name of Object.keys(toppings)) {
  	var chkbox = document.getElementById(name);
  	if (toppings[name][menuId]) { // available topping on this menu
      chkbox.disabled = false;
    }
    else {
    	// disable if menu selected
      chkbox.disabled = menu[menuId].checked;
      if (menu[menuId].checked) {
      	chkbox.checked = false;
      }
    }
  }
}