爲什麼我的所有複選框都沒有相同的行爲？

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

您的複選框，並依賴複選框組應該是不知疲倦其他複選框組的下拉列表。

你的其他陳述的含義是你已經使所有的人都相互依賴。如果陳述他們應該是分開的。

所以，工作校正

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

Answer 2

更改if else's到if的。因爲它們可以鏈接到if(framework.checked == false)，他們是被忽視if(framework.checked == true)

Answer 3

語法錯誤

在某些瀏覽器elem.disabled不工作，所以：在HTML 要禁用複選框，你只需要添加disabled屬性，再次啓用它，你必須刪除disabled屬性和不分配false

解決方案

// 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; 
 
    disableElement(express); 
 
    expressLbl.style.color = "grey"; 
 
    } else if(express.checked == true) { 
 
    //framework.disabled = true; 
 
    disableElement(framework); 
 
    frameworkLbl.style.color = "grey"; 
 
    } else if(libs.checked == true) { 
 
    //node.disabled = true; 
 
    disableElement(node); 
 
    nodeLbl.style.color = "grey"; 
 
    } else if(node.checked == true) { 
 
    //libs.disabled = true; 
 
    disableElement(libs); 
 
    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; 
 
    enableElement(express); 
 
    expressLbl.style.color = "black"; 
 
    } 
 
// else 
 
    if(express.checked == false) { 
 
    //framework.disabled = false; 
 
    enableElement(framework); 
 
    frameworkLbl.style.color = "black"; 
 
    } 
 
// else 
 
    if(libs.checked == false) { 
 
    //node.disabled = false; 
 
    enableElement(node); 
 
    nodeLbl.style.color = "black"; 
 
    } 
 
// else 
 
    if(node.checked == false) { 
 
    //libs.disabled = false; 
 
    enableElement(libs); 
 
    libsLbl.style.color = "black"; 
 
    } 
 
    console.log("express.checked=" +(express.checked)); 
 
}); 
 

 
function disableElement(elem){ 
 
    var att = document.createAttribute("disabled");  // Create a "disabled" attribute 
 
    elem.setAttributeNode(att); 
 
} 
 

 
function enableElement(elem){ 
 
    elem.removeAttribute("disabled"); 
 
}

<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 4

有幹你的代碼了顯著的機會。 For example，如果你使用一個數組來跟蹤競爭時隙，您可以通過依靠命名約定避免冗長使用的變量和邏輯塊：

var timeslots = [['framework','express'],['libs','node'],['build'],['npm']]; 

document.querySelector(".activities").addEventListener("change", function(e){ 
    timeslots.filter(function(slot){ 
     return slot.indexOf(e.target.id) > -1; 
    })[0].forEach(function(lecture){ 
     var checkbox = document.getElementById(lecture); 
     var label = document.getElementById(lecture+'Label'); 
     // deactivate competing 
     if(e.target.checked == true) { 
     if(lecture != e.target.id) { 
      checkbox.disabled = true; 
      label.style.color = 'grey'; 
     } 
     } else { //reactivate competing 
     if(lecture != e.target.id) { 
      checkbox.disabled = false; 
      label.style.color = 'black'; 
     } 
     } 
    }); 
}); 

這裏我們使用Array#filter找到我們改變複選框生活中的時隙。我們可以通過使用我們通過傳遞給change偵聽器的匿名回調捕獲的event.target來實現這一點（我們按照約定在這裏調用本地變量e）。

假設一個講座只存在於一個時隙中，我們可以得到第一個由濾波器返回的位置，並在Array#forEach之間循環遍歷每個內部數組。然後，我們使用您的命名約定激活或停用所有競爭的複選框和標籤。這將使您的JavaScript代碼更易於維護，只需修改時間片數組是否需要更新。