jquery - 将输入标签限制为一定数量

Question

<input>当我通过 Jquery 添加标签时，我想将标签的数量限制为十个。我该怎么做？这是我的 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

您可以检查有多少输入，并确定是否应该添加它们。此外，我注意到的几件事...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 更改为使用类。

Answer 2

添加一个变量来保存您创建的元素的数量，并且每当您创建一个时，它就会增加一个。然后，您可以检查此变量是否已达到限制。

Answer 3

我希望这会奏效。

$('#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;
 });