为什么不能检查我的复选框是否已选中？

Question

 // Register for Activities section of the form. document.querySelector(".activities").addEventListener("change", function(){ var main = document.querySelector("all").checked; var framework = document.querySelector("js-frameworks").checked; var libs = document.querySelector("js-libs").checked; var express = document.querySelector("express").checked; var node = document.querySelector("node").checked; var build = document.querySelector("build-tools").checked; var npm = document.querySelector("npm").checked; // 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 == true) { express.disabled = true; } else if(express == true) { framework.disabled = true; } else if(libs == true) { node.disabled = true; } else if(node == true) { libs.disabled = true; } // When a user unchecks an activity, make sure that competing activities (if there are any) are no longer disabled. if(!framework.checked) { express.disabled = false; } else if(!express.checked) { framework.disabled = false; } else if(!libs.checked) { node.disabled = false; } else if(!node.checked) { libs.disabled = false; } }); 

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

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

用户将通过复选框选择他们想做的活动。

如果用户选择的活动与其他活动存在时间冲突。 然后，其他复选框将被禁用。

我不想为此使用jQuery。

我在尝试执行此操作时遇到了麻烦。 该错误表明无法读取null的“已检查”属性？

我在这里做错了什么？ 我已经尝试过，混淆了是否要调用值，检查属性，并尝试了很多尝试的解决方案，但无济于事。

Answer 1

Document.querySelector()使用CSS样式选择器。 因此，这一行代码正在寻找类型all的DOM元素，而不是寻找具有以下名称的DOM元素：

document.querySelector("all")

相反，您可以按名称选择元素并采用找到的第一个元素 ：

document.getElementsByName("all")[0]

另一种选择是为您的元素分配一个ID， 然后通过Document.getElementById()选择 。

Answer 2

我已经半工作了。

我在HTML中添加了ID：

<fieldset class="activities">
        <legend>Register for Activities</legend>
        <label><input type="checkbox" name="all" id="all"> Main Conference — $200</label>
        <label><input type="checkbox" name="js-frameworks" id="framework"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="js-libs" id="libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
        <label><input type="checkbox" name="express" id="express"> Express Workshop — Tuesday 9am-12pm, $100</label>
        <label><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>

并改变了我的选择。

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

    // 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;
    } else if(express.checked == true) {
        framework.disabled=  true;
    } else if(libs.checked == true) {
        node.disabled = true;
    } else if(node.checked == true) {
        libs.disabled = true;
    } 

    // 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;
    } else if(express.checked == false) {
        framework.disabled = false;
    } else if(libs.checked == false) {
        node.disabled = false;
    } else if(node.checked == false) {
        libs.disabled = false;
    } 

    // Calculate running total of price of events selected
});

在需要时，这将成功禁用正确的复选框。 但是当我取消选中冲突框时，我无法启用它们。

怎么了？ 我已经尝试过我的if条件，但到目前为止没有运气。

Answer 3

This is how is solve this issue:

//deactivate checkboxes if there is a conflict with scheduling 
$(function() {
    $('[name="js-frameworks"]').change(function() {
        if ($(this).is(':checked')) {
            $('[name="express"]').prop('disabled', true);
        } else if (!$(this).is(':checked')) {
            $('[name="express"]').prop('disabled', false);
        }
    })
});

$(function() {
    $('[name="express"]').change(function() {
        if ($(this).is(':checked')) {
            $('[name="js-frameworks"]').prop('disabled', true);
        } else if (!$(this).is(':checked')) {
            $('[name="js-frameworks"]').prop('disabled', false);
        }
    })
});

....