Question

我在这里有一个问题，我跟着别人的指示，但不知怎的，我错过了一些东西。当我尝试测试时，复选框仍然不受限制。我可能错过了什么或者我错了。

这是名为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>

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

使用Array和Javascript选择有限的复选框

1 个答案: