使用數組和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的有限複選框選擇

回答

相關問題