使用数组和Javascript的有限复选框选择

我在这里遇到了问题，我跟着某人的指令，但不知何故我错过了一些东西。当我尝试测试时，复选框仍然不受限制。我可能错过了一些东西，或者我错了。使用数组和Javascript的有限复选框选择

这里的practice_limited_selection.html命名代码

<!DOCTYPE html> 
<html> 
<head> 
    <title>Limted Selection</title> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("input[type=checkbox]").click(function(e) { 
     if ($(e.currentTarget).closest("div.question").length > 0) { 
     toggleInputs($(e.currentTarget).closest("div.question")[0]); 
     } 
    }); 
    }); 
    function toggleInputs(questionElement) { 
    if ($(questionElement).data('max-answers') == undefined) { 
     return true; 
    } else { 
     maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
     if ($(questionElement).find(":checked").length >= maxAnswers) { 
     $(questionElement).find(":not(:checked)").attr("disabled", true); 
     } else { 
     $(questionElement).find("input[type=checkbox]").attr("disabled", false); 
     } 
    } 
    } 
    </script> 
</head> 
<script type="text/javascript" href="limited.js"></script> 
<body> 
    <div class="question" data-max-answers="2"> 
    <p>Here's a question that is up to 2 answers: <br></p> 
    <input type="checkbox" name="answer1[]" value="A"> A <br> 
    <input type="checkbox" name="answer1[]" value="B"> B <br> 
    <input type="checkbox" name="answer1[]" value="C"> C <br> 
    <input type="checkbox" name="answer1[]" value="D"> D <br> 
    </div> 
    <div class="question" data-max-answers="3"> 
    <p>Here's a question that is up to 3 answers: <br></p> 
    <input type="checkbox" name="answer2[]" value="A"> A <br> 
    <input type="checkbox" name="answer2[]" value="B"> B <br> 
    <input type="checkbox" name="answer2[]" value="C"> C <br> 
    <input type="checkbox" name="answer2[]" value="D"> D <br> 
    </div> 
</body> 
</html>

来源

2017-06-14 Zeunee Lo

在HTML的'head'部分的代码似乎使用jQuery，但我在整个HTML文件中看不到任何对jQuery库的引用。这可能是一个问题。 –

这里是工作的代码

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Limted Selection</title> 
     <script src="jquery-3.2.1.min.js"> 
     </script> 
    </head> 
    <script type="text/javascript" href="limited.js"></script> 
    <body> 
     <div class="question" data-max-answers="2"> 
     <p>Here's a question that is up to 2 answers: <br></p> 
     <input type="checkbox" name="answer1[]" value="A"> A <br> 
     <input type="checkbox" name="answer1[]" value="B"> B <br> 
     <input type="checkbox" name="answer1[]" value="C"> C <br> 
     <input type="checkbox" name="answer1[]" value="D"> D <br> 
     </div> 
     <div class="question" data-max-answers="3"> 
     <p>Here's a question that is up to 3 answers: <br></p> 
     <input type="checkbox" name="answer2[]" value="A"> A <br> 
     <input type="checkbox" name="answer2[]" value="B"> B <br> 
     <input type="checkbox" name="answer2[]" value="C"> C <br> 
     <input type="checkbox" name="answer2[]" value="D"> D <br> 
     </div> 


     <script> 
     $(document).ready(function() { 
     $("input[type=checkbox]").click(function(e) { 

      if ($(e.currentTarget).closest("div.question").length > 0) { 
      toggleInputs($(e.currentTarget).closest("div.question")[0]); 
      } 
     }); 
     }); 

     function toggleInputs(questionElement) { 
     if ($(questionElement).data('max-answers') == undefined) { 
      return true; 
     } else { 
      maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
      if ($(questionElement).find(":checked").length >= maxAnswers) { 
      $(questionElement).find(":not(:checked)").attr("disabled", true); 
      } else { 
      $(questionElement).find("input[type=checkbox]").attr("disabled", false); 
      } 
     } 
     } 
     </script> 
    </body> 
    </html>

来源

2017-07-24 06:12:20

使用数组和Javascript的有限复选框选择

回答

相关问题