Question

我正在构建多个复选框。我想添加如果第一个答案为是（数据是否达到？答案：是）的功能，则禁用所有剩余的复选框。我应该怎么做呢？

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一起使用。）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

希望这会对你有所帮助

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

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

然后使用以下javascript： -

function toggleCheckboxState(className, diabled) {
  var checkboxes = document.getElementsByClassName(className);
  for(var i = 0; i < checkboxes.length; ++i)
  {
      checkboxes[i].disabled  = diabled
  }
}
document.getElementById('checkme2').onclick = function(e) {
    var diabled  = false
  if(this.checked) {
        diabled = true
  }
  toggleCheckboxState('parent', diabled)
}

document.getElementById('checkme1').onclick = function(e) {
    var diabled  = false
  if(this.checked) {
        diabled = true
  }

  toggleCheckboxState('child', diabled)
}

DEMO

Answer 3

你可以这样做。

＆＃13;

$(document).ready(function() {
  $("#checkme1").change(function(e) {

    if ($(this).prop("checked")) {
      $("input[id^='checkme']").prop("disabled", "true");
      $(this).prop("disabled", false);
    } else {
      $("input[id^='checkme']").prop("disabled", false);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>
<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>
<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>

＆＃13;

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

3 个答案: