html函数如何构建商品规格选择 html函数复选框组的联动逻辑

<div class="spec-group">
  <label><input type="checkbox" name="color" value="red"> 红色 </label>
  <label><input type="checkbox" name="color" value="blue"> 蓝色 </label>
</div>

<div class="spec-group">
  <label><input type="checkbox" name="size" value="S"> S </label>
  <label><input type="checkbox" name="size" value="M"> M </label>
</div>

const validCombinations = [
  { color: 'red', size: 'S' },
  { color: 'red', size: 'M' },
  { color: 'blue', size: 'M' }
];

function updateSpecOptions() {
  const selected = {};
  document.querySelectorAll('input[type="checkbox"]:checked').forEach(ck => {
    selected[ck.name] = ck.value;
  });

  // 获取所有复选框
  document.querySelectorAll('input[type="checkbox"]').forEach(ck => {
    if (ck.checked) return; // 已选中的不处理

    const tempSelected = { ...selected, [ck.name]: ck.value };
    const isValid = validCombinations.some(combo => {
      return Object.keys(tempSelected).every(key => combo[key] === tempSelected[key]);
    });

    ck.disabled = !isValid;
  });
}

document.querySelectorAll('input[type="checkbox"]').forEach(ck => {
  ck.addEventListener('change', updateSpecOptions);
});