Why won't all my checkboxes toggle between disabled and enabled?

I'm writing the interactivity for a form.

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

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

For some reason, when I check 'framework', it will disable 'express'. If I uncheck 'framework', 'express' is then enabled.

This isn't working correctly for the other boxes. I can get them to disable the other. But I can't toggle it back to normal unless I refresh the page.

What is the reason for this?

Thanks1