javascript - 启用第一个复选框后禁用其他复选框

Question

我正在构建多个复选框。我想添加一个功能，如果第一个答案是"is"(数据是否到达？答案:是)，所有剩余的复选框都被禁用。我应该怎么做？

HTML:

<p><span>Did data reach?</span>
   <form action="" method="post">
     <input type="checkbox" id="checkme1" value="Yes" />
     Yes
     <input type="checkbox" id="checkme2" value="No" />
     No
   </form>
 </p>
 <p>
   <span>Is time right?</span>

   <form action="" method="post">
      <input type="checkbox" id="checkme3" value="Yes" />
      Yes
      <input type="checkbox" id="checkme4" value="No" />
      No
   </form>
  </p>
  <p>
    <span>Is order complete?</span>
    <form action="" method="post">
      <input type="checkbox" id="checkme5" value="Yes" />
      Yes
      <input type="checkbox" id="checkme6" value="No" /> 
      No
    </form>
  </p>

JS:

 var checker1 = document.getElementById('checkme1');
 var checker2 = document.getElementById('checkme2');
 var checker3 = document.getElementById('checkme3');
 var checker4 = document.getElementById('checkme4');
 var checker5 = document.getElementById('checkme5');
 var checker6 = document.getElementById('checkme6');
 // when unchecked or checked, run the function
 checker1.onchange = function(){
if(this.checked){
    checkme1.disabled = false;
} else {
    checkme2.disabled = false;
} else {
    checkme3.disabled = true;
} else {
    checkme4.disabled = true;
} else {
    checkme5.disabled = true;
} else {
    checkme6.disabled = true;

}

Answer 1

不止一种else 情况是无效语法。您需要一个包含禁用所有其他复选框的代码的 if，然后是一个包含(重新)启用所有其他复选框的代码的 else:

if(this.checked){
    checkme2.disabled = true;
    checkme3.disabled = true;
    checkme4.disabled = true;
    checkme5.disabled = true;
    checkme6.disabled = true;
} else {
    checkme2.disabled = false;
    checkme3.disabled = false;
    checkme4.disabled = false;
    checkme5.disabled = false;
    checkme6.disabled = false;
}

或者您可以通过完全省略 if/else 来缩短它:

checkme2.disabled = this.checked;
checkme3.disabled = this.checked;
checkme4.disabled = this.checked;
checkme5.disabled = this.checked;
checkme6.disabled = this.checked;

或者一个声明:

checker2.disabled
  = checker3.disabled
  = checker4.disabled
  = checker5.disabled
  = checker6.disabled
  = this.checked;

或者，一行 jQuery(不需要任何 checkmeX 变量):

$("#checkme1").click(function() {
  $(":checkbox").not(this).prop("disabled", this.checked);
});

(展开并运行以下命令以查看它是否适用于您的 html。)

$("#checkme1").click(function() {
  $(":checkbox").not(this).prop("disabled", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><span>Did data reach?</span>
  <form action="" method="post">
    <input type="checkbox" id="checkme1" value="Yes" />Yes
    <input type="checkbox" id="checkme2" value="No" />No</form>
</p>
<p><span>Is time right?</span>
  <form action="" method="post">
    <input type="checkbox" id="checkme3" value="Yes" />Yes
    <input type="checkbox" id="checkme4" value="No" />No</form>
</p>
<p><span>Is order complete?</span>
  <form action="" method="post">
    <input type="checkbox" id="checkme5" value="Yes" />Yes
    <input type="checkbox" id="checkme6" value="No" />No</form>
</p>