Question

在选中teeth_input_3时如何禁用teeth_input_4。

再次取消选中teeth_input_4时启用它仅显示三张图像(img1,img4,img5)中的一张

希望能找到解决此问题的帮助

function myFunction() {
  var checkBox = document.getElementById("teeth_input_2");
  var text = document.getElementById("img3");
  if (checkBox.checked == true){
    img3.style.display = "block";
    img2.style.display = "none";
  } else {
    img3.style.display = "none";
    img2.style.display = "block";
  }
}
function myFunction2() {
  var checkBox = document.getElementById("teeth_input_3");
  var text = document.getElementById("img4");
  if (checkBox.checked == true){
    img4.style.display = "block";
    img1.style.display = "none";
  } else {
    img4.style.display = "none";
    img1.style.display = "block";
  }
}
function myFunction3() {
  var checkBox = document.getElementById("teeth_input_4");
  var text = document.getElementById("img5");
  if (checkBox.checked == true){
    img5.style.display = "block";
    img4.style.display = "none";
    img1.style.display = "none";
  } else {
    img5.style.display = "none";
    myFunction2()

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="img1" src="a.jpg" alt="present left 8" style="display: block;">
  <img id="img4" src="c.jpg" alt="Endo" style="display: none;">
  <img id="img5" src="c.jpg" alt="Implant" style="display: none;">
  <img id="img2" src="b.jpg" alt="Not Caries" style="display: block;">
  <img id="img3" src="c.jpg" alt="Caries" style="display: none;">

</div>

<input type="checkbox" id="teeth_input_1" checked>Present
<br /><input type="checkbox" id="teeth_input_2" onclick="myFunction()">Caries
<br /><input type="checkbox" id="teeth_input_3" onclick="myFunction2()">Endo
<br /><input type="checkbox" id="teeth_input_4" onclick="myFunction3()">Implant

Answer 1

如果您将其他事件放在一起，则不需要调用功能，可以这样做。

<input name="teeth_input" type="checkbox" id="teeth_input_1" checked>Present<br>
<input name="teeth_input" type="checkbox" id="teeth_input_2" >Caries<br>
<input name="teeth_input" type="checkbox" id="teeth_input_3" >Endo<br>
<input name="teeth_input" type="checkbox" id="teeth_input_4" >Implant

输入名称，以便在单击其他输入时发生该事件。

$('input[name="teeth_input"]:checkbox').change(function () {
   if ($("#teeth_input_2").is(':checked')) {
     $("#img2").hide();
     $("#img3").show();
   }
   else if ($("#teeth_input_2").is(':checked')) {
     $("#img2").hide();
     $("#img3").show();
   }
   if ($("#teeth_input_3").is(':checked')) {
     $("#img1").hide();
     $("#img4").show();
   }
   else if (!$("#teeth_input_3").is(':checked')) {
     $("#img4").hide();
     $("#img1").show();
   }
   if ($("#teeth_input_4").is(':checked')) { 
     $("#teeth_input_3 ").attr("disabled", true);
     $("#img5").hide();
   } 
   else if (!$("#teeth_input_4").is(':checked')) {
     $("#teeth_input_3").attr("disabled", false);
     $("#img1").show();
     $("#img4").show();
     $("#img5").show();
   }
});

OR

$("#teeth_input_4").change( function(){
  if ($(this).is(':checked')) { $("#teeth_input_3").attr("disabled", true); } 
  else {
       $("#teeth_input_3").attr("disabled", false);
       $("#img1").show();
       $("#img4").show();
       $("#img5").show();
  }
});

如何启用和禁用复选框？

1 个答案: