jQuery克隆表单字段直到最大计数

Question

我允许用户在点击时添加更多字段。但我希望允许用户添加最多 4 个字段。如何更改此代码以使其正常工作。因此，当用户创建总共 4 个元素时，Add Photo 按钮应该变为禁用模式或隐藏。我更喜欢禁用，但如果它比隐藏更难也可以。

jQuery 代码：

jQuery(document).ready(function(){

   jQuery('#add-photo-button').click(function(){

        var current_count = jQuery('input[type="file"]').length;
        var next_count = current_count + 1;

        jQuery('#file-upload').prepend('<input type="file" name="photo_' + next_count + '" />');    

   });

});

HTML 代码：

<form id="file-upload" action="#" method="GET" enctype="multipart/form-data">
    <div id="image-uploader-box" class="group">           
        <div id="forms" class="add-photo-fields">
            <input type="submit" value="Upload" />
            <input type="button" id="add-photo-button" class="add-photo-button" value="Add Photo"/>
        </div>
    </div> 
</form>

非常感谢

Answer 1

试试这个

Demo

jQuery(document).ready(function(){
  $cnt = 1;
  jQuery('#add-photo-button').click(function(){
   if($cnt == 4){
     //$('#add-photo-button').hide();
     $('#add-photo-button').prop('disabled', true);
   }
   $cnt++;
   var current_count = jQuery('input[type="file"]').length;
   var next_count = current_count + 1;
   jQuery('#file-upload').prepend('<input type="file" name="photo_' + next_count + '"  />');    

 });

});