Question

我希望在通过Jquery添加它时将<input>标记的数量限制为10。我怎么去这个？这是我的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，而不是使用类。

将输入标记限制为特定数字

3 个答案: