Question

我正在开发一个表单，可以在单击按钮时添加特定数量的字段，当数字达到添加文本字段的限制时，它将被禁用。

问题是当它达到限制时仍然可以点击按钮，并且当文本字段达到允许的最大输入框时单击按钮两次将禁用

这是我的代码。

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x >= max_fields) { //max input box allowed
      e.preventDefault();
      $(this).toggleClass("disabled");
    } else {
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').toggleClass("disabled");
  })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div id="healthcard" class="form-group">
      <button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
    </div>
  </div>
</div>

我认为我在代码中遗漏了一些我无法弄清楚的东西。请帮帮我。

抱歉英语不好。

谢谢，

Answer 1

您的问题是您需要单击按钮6次以禁用它，这是错误的，下面是使用禁用属性的工作代码段：

当用户达到最大值时，我会禁用该按钮。
点击按钮是为了使用not(':disabled')
当用户删除div时，该按钮会再次启用

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $("#add_field").not(':disabled').click(function(e) { //on add input button click
    e.preventDefault();
    
    
    
    x++; //text box increment
    
    if (x == max_fields) 
    {
         $(this).attr("disabled", true);
    }
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    
   
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
   
    $('.hmo-add' + x).remove();
    x--;
    
    $('#add_field').attr("disabled", false);
  })


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div id="healthcard" class="form-group">
      <button id="add_field" class="btn btn-primary" type="button" name="hmo">HMO</button>
    </div>
  </div>
</div>

Answer 2

<强> DEMO

而不是toggleClass使用addClass而disabling和removeClass使用enabling，而不是$(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x >= max_fields) { //max input box allowed e.preventDefault(); $(this).addClass("disabled");//addClass } else { x++; //text box increment $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $('.hmo-add' + x).remove(); x--; e.preventDefault(); $('#add_field').removeClass("disabled"); //removeClass })，如下所示：

    function getResults(&$analytics, $profileId) {
  // Calls the Core Reporting API and queries for the number of sessions
  // for the last 30 days.
   return $analytics->data_ga->get(
       'ga:' . $profileId,
       '30daysAgo',
       'today',
       'ga:sessionCount,ga:sessionDurationBucket,ga:users,ga:percentNewSessions,ga:bounceRate,ga:pageviews');
}

Answer 3

在x之后检查append：

$(add_button).click(function(e) { //on add input button click
  if (x < max_fields) { //max input box allowed
    x++; //text box increment
    $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
    if (x == max_fields)
    {
      $(this).addClass("disabled");
    }
  }
});

Answer 4

这就是你需要的：

$(document).ready(function() {
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $("#healthcard"); //Fields wrapper
    var add_button = $("#add_field"); //Add button ID

    var x = 0; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x >= max_fields) { //max input box allowed
            $(this).addClass("disabled");
            $(this).attr("disabled", "disabled");
        } else {
            x++; //text box increment
            $(wrapper).append('<div class="hmo-add' + x + '""><div  class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $('.hmo-add' + x).remove();
        x--;
        $('#add_field').removeClass("disabled");
        $('#add_field').removeAttr("disabled");
    })
});

我已将toggleClass移至addClass / removeClass，因为在这种情况下更有意义。我还使用disabled HTML属性和attr()功能在达到限制后禁用了按钮。如果单击“删除”按钮，则会删除已禁用的类和属性。我还删除了一些重复的e.PreventDefault()次呼叫，因为它们不需要。

Answer 5

＆＃13;

$(document).ready(function() {
  var max_fields = 5; //maximum input boxes allowed
  var wrapper = $("#healthcard"); //Fields wrapper
  var add_button = $("#add_field"); //Add button ID

  var x = 0; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    //if (x >= max_fields) { //max input box allowed
      //e.preventDefault();
     // $(this).toggleClass("disabled");
    //} else {
    if(x < max_fields){
      x++; //text box increment
      $(wrapper).append('<div class="hmo-add' + x + '""><div class="col-sm-12 col-md-4"><div class="form-group"><label class="card">Healthcard</label><input class="form-control col-md-4" type="text" name="mytext[]"/></div></div><div class="col-sm-12 col-md-8"><div class="form-group"><label class="card">Healthcard No.</label><input class="form-control col-md-8" type="text" /><a href="#" class="remove_field">Remove</a></div></div></div>'); //add input box
      if(x === max_fields) {
      	$(this).toggleClass("disabled");
      }
      
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $('.hmo-add' + x).remove();
    x--;
    e.preventDefault();
    $('#add_field').toggleClass("disabled");
  })


});

＆＃13;

[http://jsfiddle.net/W4Km8/8153/][1] I just updated your code in jsfiddle please check

当字段等于特定数字时，JQuery禁用按钮

5 个答案: