javascript - 为什么我的所有复选框不具有相同的行为？

Question

我正在向表单添加一些交互性。

用户将从一系列事件中进行选择。有些事件有时间冲突。

如果用户选择其中一项时间冲突的事件，则与之冲突的事件将被禁用并且无法选择。

如果用户随后取消选择该复选框，则他们都将被启用，并且可以自由选择他们想要的任何复选框。

现在，我可以禁用所有正确的框。但除了第一个框架之外，我无法再次禁用它们。对于其他人，我被锁定了我的决定，必须刷新页面。为什么会出现这种情况？

这是我的代码:

Javascript

// Register for Activities section of the form.
document.querySelector(".activities").addEventListener("change", function() {
  var main = document.getElementById("all");
  var framework = document.getElementById("framework");
  var libs = document.getElementById("libs");
  var express = document.getElementById("express");
  var node = document.getElementById("node");
  var build = document.getElementById("build");
  var npm = document.getElementById("npm");
  var frameworkLbl = document.getElementById("frameworkLabel");
  var libsLbl = document.getElementById("libsLabel");
  var expressLbl = document.getElementById("expressLabel");
  var nodeLbl = document.getElementById("nodeLabel");

  // If the user selects a workshop, don't allow selection of a workshop at the same date and time -- you should disable the checkbox and visually indicate that the workshop in the competing time slot isn't available.
  if(framework.checked == true) {
    express.disabled = true;
    expressLbl.style.color = "grey";
  } else if(express.checked == true) {
    framework.disabled = true;
    frameworkLbl.style.color = "grey";
  } else if(libs.checked == true) {
    node.disabled = true;
    nodeLbl.style.color = "grey";
  } else if(node.checked == true) {
    libs.disabled = true;
    libsLbl.style.color = "grey";
  }

  // When a user unchecks an activity, make sure that competing activities (if there are any) are no longer disabled.
  if(framework.checked == false) {
    express.disabled = false;
    expressLbl.style.color = "black";
  } else if(express.checked == false) {
    framework.disabled = false;
    frameworkLbl.style.color = "black";
  } else if(libs.checked == false) {
    node.disabled = false;
    nodeLbl.style.color = "black";
  } else if(node.checked == false) {
    libs.disabled = false;
    libsLbl.style.color = "black";
  }
});

HTML

<fieldset class="activities">
  <legend>Register for Activities</legend>
  <div id="activityReminder"></div>
  <div id="lineBreak"></div>
  <label><input type="checkbox" name="all" id="all" class="activity"> Main Conference — $200</label>
  <label id="frameworkLabel"><input type="checkbox" name="js-frameworks" id="framework" class="activity"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
  <label id="libsLabel"><input type="checkbox" name="js-libs" id="libs" class="activity"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
  <label id="expressLabel"><input type="checkbox" name="express" id="express" class="activity"> Express Workshop — Tuesday 9am-12pm, $100</label>
  <label id="nodeLabel"><input type="checkbox" name="node" id="node" class="activity"> Node.js Workshop — Tuesday 1pm-4pm, $100</label>          
  <label><input type="checkbox" name="build-tools" id="build" class="activity"> Build tools Workshop — Wednesday 9am-12pm, $100</label>
  <label><input type="checkbox" name="npm" id="npm" class="activity"> npm Workshop — Wednesday 1pm-4pm, $100</label>
</fieldset>

Answer 1

您的复选框和依赖复选框组应该独立​​于其他复选框组。

else if 语句的含义是您已使它们全部相互依赖。它们应该是单独的 if 语句。

因此，有效的修正是

// Register for Activities section of the form.
document.querySelector(".activities").addEventListener("change", function(){
    var main = document.getElementById("all");
    var framework = document.getElementById("framework");
    var libs = document.getElementById("libs");
    var express = document.getElementById("express");
    var node = document.getElementById("node");
    var build = document.getElementById("build");
    var npm = document.getElementById("npm");

    var frameworkLbl = document.getElementById("frameworkLabel");
    var libsLbl = document.getElementById("libsLabel");
    var expressLbl = document.getElementById("expressLabel");
    var nodeLbl = document.getElementById("nodeLabel");


    // If the user selects a workshop, don't allow selection of a workshop at the same date and time -- you should disable the checkbox and visually indicate that the workshop in the competing time slot isn't available.
    if(framework.checked == true) {
        express.disabled = true;
        expressLbl.style.color = "grey";
    }
    if(express.checked == true) {
        framework.disabled=  true;
        frameworkLbl.style.color = "grey";
    }
    if(libs.checked == true) {
        node.disabled = true;
        nodeLbl.style.color = "grey";
    }
    if(node.checked == true) {
        libs.disabled = true;
        libsLbl.style.color = "grey";
    } 

    // When a user unchecks an activity, make sure that competing activities (if there are any) are no longer disabled.
    if(framework.checked == false) {
        express.disabled = false;
        expressLbl.style.color = "black";
    }
    if(express.checked == false) {
        framework.disabled = false;
        frameworkLbl.style.color = "black";
    }
    if(libs.checked == false) {
        node.disabled = false;
        nodeLbl.style.color = "black";
    }
    if(node.checked == false) {
        libs.disabled = false;
        libsLbl.style.color = "black";
    }
});