为什么我的所有复选框都没有相同的行为？

时间：2016-09-01 00:59:34

标签： javascript dom checkbox

我正在为表单添加一些交互性。

用户将从一系列活动中进行选择。有些活动有时间冲突。

如果用户选择其中一个带有时间冲突的活动，则与其冲突的活动将被禁用且无法选择。

如果用户然后取消选中该复选框，则它们全部启用并可以自由选择他们想要的任何复选框。

现在，我可以禁用所有正确的方框。但除了第一个框架之外，我无法再次禁用它们。与其他人一起，我对我的决定感到困惑，并且必须刷新页面。为什么会这样？

这是我的代码：

  

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

4 个答案:

答案 0 :(得分：3)

您的复选框和相关复选框组应该独立​​于其他复选框组。

你的其他if语句的含义是你使所有这些语句彼此依赖。如果陈述，它们应该是分开的。

因此，正在进行修正

data-src

答案 1 :(得分：2)

将if else更改为if。他们被链接到if(framework.checked == false)和if(framework.checked == true)

时被忽略了

答案 2 :(得分：1)

语法错误

在某些浏览器中elem.disabled无效，因此： 要HTML中的停用复选框，您只需添加disabled属性，要再次启用该属性，您必须删除disabled属性并 NOT < / strong>指定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>

答案 3 :(得分：1)

有很多机会来干你的代码。 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来查找我们更改的复选框所在的时间段。我们可以通过使用传递给event.target侦听器的匿名回调来捕获我们正在捕获的change（按惯例，我们在这里调用局部变量e）

假设演讲只存在于一个时隙中，我们得到滤波器返回的第一个位置，并使用Array#forEach遍历每个内部数组。然后，我们使用您的命名约定激活或停用所有竞争复选框和标签。如果您的HTML表单需要更新，只需修改 timeslots 数组，这将使您的JavaScript代码更易于维护。

相关问题
最新问题