javascript - 限制复制表格的数量

Question

目前我能够复制表单，但是我想对其能够执行此操作的次数设置限制(复制)。有没有办法做到这一点，例如，当我希望限制为 5 时，一旦表单总数达到 5，“添加”按钮将被禁用(当我单击它时，它不会执行任何操作)。但是，当我删除表单时，“添加”按钮再次起作用(可以添加表单)。我只被允许使用 HTML CSS 和 Javascript。

$(function() {


  var addDiv = $('#addinput');
  var i = $('#addinput p').size() + 1;


  $('#addNew').live('click', function() {
    $('<label>Choose a picture<br><input type="file" ' + i + '" value="" /><img class="target" src="#" alt="Choose and Upload" /><a href="#" id="remNew">Remove</a></label><br>').appendTo(addDiv);
    i++;
    $('fieldset input').change(function() {
      if (this.files && this.files[0]) {
        var $target = $(this).next('.target');
        var reader = new FileReader();
        reader.onload = function(e) {
          $target.attr('src', e.target.result).width(150).height(112);
        };
        reader.readAsDataURL(this.files[0]);
      }
    });

    return false;
  });



  $('#remNew').live('click', function() {

    if (i > 2) {
      $(this).parents('label').remove();
      i--;
    }
    return false;
  });
});

.locationsector {
  border-radius: 5px;
  border: 5px solid black;
  width: 30%;
  margin-left: 0.79%;
  float: left;
  padding: 10px;
}
img {
  text-align: center;
  margin: 2%;
  display: inline-block;
  border: 10px solid #140E26;
  border-radius: 10px;
  padding: 5px;
  width: 150px;
  height: 112px;
}
#addNew {
  background: black;
  margin-left: 2%;
  padding: 5px;
  font-size: 15px;
  color: white;
  display: inline-block;
  width: 100px;
  border: 1px solid #140E26;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<fieldset class="locationsector" id="addinput">
  <legend>Test</legend>
  <p>
    <label for="north">Choose a Picture
      <br>
      <input type="file" required="required" />
      <img class="target" src="#" alt="Choose and Upload" />
    </label>
    <br>
    <a id="addNew">Add</a>
  </p>
</fieldset>

Answer 1

你已经有了一个计数器i，这很好。 这将使您更容易限制复制:

// ...
        $('#addNew').live('click', function() {
            if(i > 5) {
                alert("Reached maximum number of fields.");
                return false;
            }
            $('<label>Choose a picture<br><input type="file" ' + i + '" value="" /><img class="target" src="#" alt="Choose and Upload" /><a href="#" id="remNew">Remove</a></label><br>').appendTo(addDiv);

// ...

alert 调用是可选的(您提到什么都不做？)