Question

目前我已经构建了这个简单的应用程序，您可以使用按钮添加输入框。然后，当达到限制时，它会阻止您添加更多，并且显示最大输入框消息。您还可以选择删除刚刚添加的框。我遇到的问题是当用户删除了一些输入框时，我不知道如何重新激活添加按钮。我对jQuery很新，所以如果有更好的编写代码的方法，那么我就是全部的耳朵。我在JSfiddle中重新创建了我的示例：http://jsfiddle.net/jTh3v/367/。

我想要这样做的方式是当你点击这样的删除按钮时：

id     status     value     count
001     air        17        3
002    ground       8        2
003    ground      -3        3
004    unknown      0        1
005    ground       6        1

Answer 1

而不是：

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;
  });

试试这个：

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--;
    $("#add").prop("disabled",false);
    $("#MAX").find('p').remove();
  });

Answer 2

在你的

里面

set oNode = objIE.document.getElementsbyClassName("iPadHack tbmsearchright")(0) 
oNode.click

为了重新启用您需要的添加按钮：

$("#Input").on("click","#remove", function(e){

要删除MAX消息，您可以：

$("#add").prop("disabled",false);

更新后的fiddle。

这里是片段：

＆＃13;

$("#MAX p:first").remove();

＆＃13;

$(document).ready(function() {
  var max_fields = 5;
  var x = 1;

  $("#add").click(function(e){
    e.preventDefault();
    if(x < max_fields){
      x++;
      $("#Input").append(
        '<div><input type="text" name="mytext[]"/><a href="#" id="remove">Remove</a></div>'
      );
    } else if(x == max_fields){
      $("#MAX").append('<p>MAX</p>');
      $(this).prop("disabled",true);
    }
  });

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); 
    x--;
    $("#add").prop("disabled",false);
    $(this).parent('div').remove(); 
    $("#MAX p:first").remove();
  });
});

＆＃13;

Answer 3

要重新启用添加按钮，请将$('#add').prop('disabled', false);添加到删除click事件处理程序。

另外，对于MAX显示，我建议在html中添加<p>Max</p>，并将#MAX div设置为style="display:none;"，然后使用$('#MAX').show()和{{1显示MAX指标。如果您按照我的说明添加上述代码以重新启用添加按钮，您将看到原因：

重新启用按钮后，MAX指示符仍保留在页面上
重新启用添加按钮，然后再次点击该按钮，直到您再次达到最大字段数，另外$('#MAX').hide()会添加到<p>MAX</p>，从而创建重复的指标

Answer 4

在#remove点击事件处理程序

中

$("#Input").on("click", "#remove", function(e) {
    e.preventDefault(); $(this).parent('div').remove(); x--;
});

添加以下行以更新disabled的{{1}}属性：

#add

示例：

$('#add').prop('disabled', false);

Answer 5

有一种方法

$("#Input").on("click","#remove", function(e){
    e.preventDefault(); 
    $(this).parent('div').remove(); x--;
    $('#MAX').html('');
    if( x===4 ){
        $('#add').prop('disabled', false);
    }
});

当您删除第五个元素时，它会启用一次“添加”按钮。

这是jsfiddle

Answer 6

当你删除其中一个时，你必须检查限制是否大于输入字段的数量。

$(document).ready(function() {
  var max_fields = 5;
  var x = 1;

  $("#add").click(function(e){
    e.preventDefault();
    if(x < max_fields){
      x++;
      $("#Input").append(
        '<div><input type="text" name="mytext[]"/><a href="#" id="remove">Remove</a></div>'
      );
    }else if(x == max_fields){
        $("#MAX").append('<p>MAX</p>');
      $(this).prop("disabled",true);
    }
  });

  $("#Input").on("click","#remove", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;

    if(x < max_fields){  //here you check if lower than limit
       $('#add').prop("disabled", false);
       $("#MAX").html(''); //deleting the content of max
    }

  });
});

Here is the jsfiddle example

jQuery：当限制减少时帮助重新激活按钮

6 个答案: