2017-06-14 6 views
0

私はここに問題があります。私は誰かの指示に従っていますが、何とか何かが欠けています。これをテストしようとすると、チェックボックスはまだ制限されていません。私は多分何かを逃したか、私は間違っています。配列と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> 
+1

は、あなたのHTMLの 'head'セクションのコードはjQueryのを使用しているように見えるが、私ですHTMLファイル全体のjQueryライブラリへの参照を見ることができません。これは問題かもしれません。 –

答えて

1

の作業コード

<!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> 
関連する問題