Question

下面是我系统中的一段代码，允许用户按下班级中的按钮＆＃34; addtextbox＆＃34;然后插入一个新的文本框。使用此功能，以便用户可以在页面上添加更多信息，但是，我只希望它持续4次，防止过度使用并阻止用户添加太多新文本框。

 $(function() {
     $(".addtextbox").click(function() {
         $(".addtextbox").before("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");
     });
 });

Answer 1

使用标记变量，请尝试以下代码：

  $(function() {
   // set default value
   // at initial state
   var limit = 1;
   $(".addtextbox").click(function() { 
     // if already added 4 times        
     if ( limit === 4 ) {
        // disabling button from click
        $(".addtextbox").prop('disabled', true);
        //return;
     } 

     $(".addtextbox").before("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");  
     // increase value + 1      
     limit++;

   });
 });

DEMO

Answer 2

当您在按钮前附加输入时，可以使用http://api.jquery.com/prevall/

$(".addtextbox").click(function() {
  var $button = $(this);

  if ($button.prevAll(".options").length < 4) {
    $button.before("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");
  } 
  else {
    $button.prop("disabled", true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="addtextbox">Add</button>

Answer 3

或者，您可以从限制中减少。

另外，你可以在点击功能http://jsfiddle.net/sherali/wrptgmcd/1/

中替换$(".addtextbox")到$(this)

   var limit = 4;//it is limited value
   $(".addtextbox").click(function() { 

       $(this).before("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");  
       limit--;

       if ( limit <= 0 ) {
          $(this).prop('disabled', true);
       } 

   });

Answer 4

您可以使用以下内容：

$(function() {
     $(".addtextbox").click(function() {
         var counter = $(this).data('counter');
         if (counter <= 4) {
             $(".addtextbox").before("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");
             $(this).data('counter', counter++);
         }
     });
 });

Answer 5

你可以通过在div中添加输入框来实现这一点 -

if($('#infobox > input').length != 4) {
...
}

然后每次检查，其输入标签名称的子元素是否计数为4？

<div id="infobox"></div>
<button class="addtextbox">Add more info</button>

完整代码将是 -

 $(function() {
     $(".addtextbox").click(function() {
         if($('#infobox > input').length != 4) {
             $('#infobox').append("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");
             if($('#infobox > input').length == 4) {
                 $(".addtextbox").attr('disabled', true);
             }
         }
     });
 });

JS

bundle exec rackup private_pub.ru -o 0.0.0.0 -s thin -E production

Working Demo

Answer 6

这是一项简单的任务，但我建议您了解loadsh.com 它有许多辅助功能，可以帮助你完成这类任务。

 $(function() {
     $(".addtextbox").click(_.before(4,function() {
         $(".addtextbox").before("<input [type='text'] class='options' placeholder='Enter Text Here'><br>");
     }));
 });

_。引用之前：https://lodash.com/docs#before

创建一个调用func的函数，使用此绑定和创建函数的参数，而它被称为小于n 倍。对创建的函数的后续调用将返回结果最后一次func调用。

如何禁用添加新文本输入的按钮，以防止用户继续添加

6 个答案: