限制輸入標籤到一定數量

Question

我想通過Jquery添加它時，將<input>標籤的數量限制爲十個。我如何去做這件事？這裏是我的javascript代碼爲<script>標籤

<script type='text/javascript'> 
    $(window).load(function() { 
    $(function() { 
      var scntDiv = $('#p_scents'); 
      var i = $('#p_scents p').size() + 1; 
      $('#addScnt').live('click', function() { 
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20"name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
        i++; 
        return false; 
       }); 
      $('#remScnt').live('click', function() { 
        if (i > 2) { 
         $(this).parents('p').remove(); 
         i--; 
        } 
        return false; 
       }); 
     }); 
}); 
</script> 

這裏的格式化 HTML

<a href="#" 
    id="addScnt" 
    name="addScnt">Add Another Input Box</a> 

<div id="p_scents"> 
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
</div> 

Answer 1

添加一個變量來保存你所創建的元素個數，每當你創建一個增量其與一個。然後，您可以檢查這個變量是否達到極限。

Answer 2

我希望這將是工作。

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

if(i >= 10) alert("can not add anymore"); return false; 

$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20"name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
i++; 

return false; 
});  

Answer 3

您可以檢查有多少輸入，並認爲是否應該添加它們。此外，我注意到幾件事情.. .live()在新版本的jQuery中已廢棄（用.on()代替），並且您的ID正在重複。讓我們解決這個問題：

$(document).on('click', '#addScnt', function() { 
    var inputCount = $(".p_scnt_add").length; 

    if (inputCount <= 10) { 
     $('<p><label for="p_scnts"><input type="text" class="p_scnt_add" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv); 
     i++; 
    } 
    return false; 
}); 

我改變了你的重複ID的使用類代替。