jQuery的克隆表單字段，直到最大值

Question

我允許用戶在點擊時添加更多字段。但我希望允許用戶添加最多4個字段。我怎樣才能改變這個代碼，使其工作。所以當用戶創建總共4個元素時，按鈕應該轉爲禁用模式或隱藏。我更喜歡禁用，但如果比隱藏更困難，也可以。

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 + '" />');  

}); 

});