除非检查某些输入,否则禁用表单字段集

const calculator = document.querySelector("form");

const occasionPricing = {
  party: 20,
  birthday: 25,
  anniversary: 50,
  wedding: 100
}

const sizeIndexes = {
  six: 1,
  eight: 1.5,
  ten: 2,
  twelve: 2.5
}

const extrasPricing = {
  candles: 5,
  inscription: 10,
  decoration: 25,
  special: 50
}

function cakes() {
  var cakes = Array.from(calculator.elements["cake"]).slice(0, 3);
  var raphael = calculator.elements["raphael"];

  function isChecked(checkbox) {
    return checkbox.checked;
  }

  var count = cakes.filter(isChecked).length;
  if (count) {
    count = count * 0.5 + 0.5;
    if (raphael.checked) {
      count += 1;
    }
    return count;
  }
  return 0;
}

function occasion() {
  var occasionCost = 0;
  var occasion = calculator.elements["occasion"];

  for (var i = 0; i < occasion.length; i++) {
    if (occasion[i].checked) {
      occasionCost = occasionPricing[occasion[i].value];
      break;
    }
  }
  return occasionCost;
}

function size() {
  var sizeIndex = 1;
  var size = calculator.elements["size"];

  for (var i = 0; i < size.length; i++) {
    if (size[i].checked) {
      sizeIndex = sizeIndexes[size[i].value];
      break;
    }
  }
  return sizeIndex;
}

function extras() {
  var extrasCost = 0;
  const extras = calculator.elements["extras"];

  for (var i = 0; i < extras.length; i++) {
    if (extras[i].checked) {
      extrasCost = extrasCost + extrasPricing[extras[i].value];
    }
  }
  return extrasCost;
}

function calculateTotal() {
  var totalCost = cakes() * occasion() * size() + extras();
  calculator.total.value = "$" + totalCost;
}

function enableFieldset(element, event) {
  
  if (event.currentTarget.id == 'cakes') {
    var checked = false;
    var checkboxes = document.getElementsByName("cake");
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) {
        checked = true;
        break;
      }
    }
    if (checked) {
      document.getElementById(element).disabled = false;
    } else {
      document.getElementById(element).disabled = true;
    }
  } else {
    document.getElementById(element).disabled = false;
  }


}

<form>

  <fieldset id="cakes" onchange="enableFieldset('occasion',event)">
    <legend>Select Cakes</legend>
    <label><input type="checkbox" name="cake" id="leonardo">Leonardo</label>
    <label><input type="checkbox" name="cake" id="donatello">Donatello</label>
    <label><input type="checkbox" name="cake" id="michelangelo">Michelangelo</label>
    <label><input type="checkbox" name="cake" id="raphael">Raphael</label>
    <p>If you select more than one cake, the other cakes are discounted 50%.</p>
    <p><small>Does not apply to Raphael.</small></p>
  </fieldset>

  <fieldset id="occasion" onchange="enableFieldset('size', event)" disabled>
    <legend>Choose Occasion</legend>
    <label><input type="radio" name="occasion" value="party" onclick="calculateTotal()" required>Party</label><br>
    <label><input type="radio" name="occasion" value="birthday" onclick="calculateTotal()">Birthday</label><br>
    <label><input type="radio" name="occasion" value="anniversary" onclick="calculateTotal()">Anniversary</label><br>
    <label><input type="radio" name="occasion" value="wedding" onclick="calculateTotal()">Wedding</label><br>
  </fieldset>

  <fieldset id="size" onchange="enableFieldset('extras', event)" disabled>
    <legend>Choose Size</legend>
    <label><input type="radio" name="size" value="six" onclick="calculateTotal()" required>6-inch</label><br>
    <label><input type="radio" name="size" value="eight" onclick="calculateTotal()">8-inch</label><br>
    <label><input type="radio" name="size" value="ten" onclick="calculateTotal()">10-inch</label><br>
    <label><input type="radio" name="size" value="twelve" onclick="calculateTotal()">12-inch</label><br>
  </fieldset>

  <fieldset id="extras" disabled>
    <legend>Select Extras</legend>
    <label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label>
    <label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label>
    <label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label>
    <label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
  </fieldset>

  <input type="text" name="total">
  <input type="submit" value="Submit" onclick="calculateTotal()">