爲什麼我不能檢查我的複選框是否已被檢查？

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？

我在這裏做錯了什麼？我嘗試過，不管我是否試圖調用價值觀，檢查屬性並嘗試了不少嘗試的解決方案，但無濟於事。相反

document.querySelector("all") 

，您可以select elements by name，並採取第一個找到：

Answer 1

Document.querySelector() uses CSS style selectors.出於這個原因，這行代碼是尋找all類型的DOM元素，而不是一個具有此名稱

document.getElementsByName("all")[0] 

另一種選擇是爲您的元素和select it via Document.getElementById()分配一個ID。

Answer 2

我已經半工半工。

我添加的ID給我的HTML：

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

這樣可以在需要時成功禁用正確的複選框。但是當我取消選中衝突的盒子時，我無法使它們變得有效。

發生了什麼事？我已經嘗試過，如果條件允許，但目前還沒有運氣。

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

....