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。

我无法尝试实现此功能。错误说它无法读取属性'checked'的null？

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

Answer 1

Document.querySelector() uses CSS style selectors.因此，这行代码正在寻找all类型的DOM元素，而不是具有此名称的DOM元素：

document.querySelector("all")

相反，你可以select elements by name并找到第一个：

document.getElementsByName("all")[0]

另一种选择是为您的元素和select it via Document.getElementById()分配一个ID。

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条件但到目前为止没有运气。

为什么我无法检查我的复选框是否已被选中？

3 个答案: