Limited Checkbox Selection using Array and Javascript

Question

I have a problem in here, I followed someone's instruction but somehow I'm missing something. When I try to test this the checkboxes are still not limited. I maybe missed something or my is wrong.

here's the code named 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>

The code in the head section of your HTML appears to be using jQuery, but I can't see any reference to the jQuery library in the entire HTML file. This might be a problem. — Emma Leis
– Emma Leis, Commented Jun 14, 2017 at 1:36

Zeunee Lo · Accepted Answer · 2017-07-24 06:12:20Z

Here is the working codes

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

Collectives™ on Stack Overflow

Limited Checkbox Selection using Array and Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related