如何限制在 JavaScript 中的按钮上添加的字段数量？

Question

我有一个代码，其中有两个按钮，用于添加和删除表单字段。我想将添加选项的数量限制为 5。

代码如下：

function addSite() {
   var new_total_sites = parseInt($('#total_sites').val()) + 1;
   var new_site_label = "<label id='new_label1_" + new_total_sites
                + "'>Additional Research Participation: </label>";
   var new_site_input = "<input id='new_site_"
                + new_total_sites
                + "' type='text' class='form-control' list='sites' name='site[]'></br>";
   var new_slot_label = "<label id='new_label2_" + new_total_sites
                + "'>Research Institution</label>";
   var new_slot_input = "<input class='form-control' id='new_slot_"
                + new_total_sites + "' name='slots[]'></br>";
  var new_research_label = "<label id='new_label3_" + new_total_sites
                + "'>Research Mentor</label>";
   var new_research_input = "<input class='form-control' id='new_research_"
                + new_total_sites + "' name='slots[]'></br>";
var new_form_group_label= "<label class= id='new_label4_" + new_total_sites
                + "'>Type of Research</label>";
   var new_basic_label = "<input type='checkbox' id='checkbox1" + new_total_sites +"' value='basic'><label for='basic' id='basic"+ new_total_sites +"'>Basic</label></br>";
   var new_clinical_label = "<input type='checkbox' id='checkbox2" + new_total_sites +"' value='clinical'><label for='clinical' id='clinical"+ new_total_sites +"'>Clinical</label></br></div>";

   $('#new_site').append(new_site_label);
   $('#new_site').append(new_site_input);
   $('#new_site').append(new_slot_label)
   $('#new_site').append(new_slot_input);
   $('#new_site').append(new_research_label);
   $('#new_site').append(new_research_input);
   $('#new_site').append(new_form_group_label);
   $('#new_site').append(new_basic_label);
   $('#new_site').append(new_clinical_label)

   $('#total_sites').val(new_total_sites)
   }
 function removeSite() {
   var last_total_site = $('#total_sites').val();
   if (last_total_site > 1) {
         $('#new_label1_' + last_total_site).remove('');
         $('#new_site_' + last_total_site).remove('');
         $('#new_label2_' + last_total_site).remove('');
         $('#new_slot_' + last_total_site).remove('');
         $('#new_label3_' + last_total_site).remove('');
         $('#new_research_' + last_total_site).remove('');
         $('#new_label4_' + last_total_site).remove('');
         $('#basic' + last_total_site).remove('');
         $('#clinical' + last_total_site).remove('');
         $('#checkbox1' + last_total_site).remove('');
         $('#checkbox2' + last_total_site).remove('');
         $('#total_sites').val(last_total_site - 1);
   }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=new_site></div>
   
<button type="button" class="btn btn-default"  onClick="addSite()">Add Mentor</button>
<button type="button" class="btn btn-default"  onClick="removeSite()">Remove Mentor</button>
<input type="hidden" value="1" id="total_sites">
</br></br>

我想做一些用户在 5 次输入后无法添加导师的东西。

Answer 1

这是一种方法。 - 我在您的代码中添加了以下检查：

  if ($('#total_sites').val() >= 5) {
    $('button:contains("Add Mentor")').prop('disabled', true);
  }

它的作用是检查#total_sites div 中元素的值。如果该值大于或等于 5，它将禁用 Add Mentor button。

我在此示例中禁用了该按钮，但您可以通过进行类似检查来执行适合您偏好的操作。

编辑：要回答 cmets 中的问题，您可以通过设置如下计数来添加编号标题：

  var count = $('#total_sites').val();

然后将计数包含在一个新元素中，如下所示：

var count = '<h1> Mentor' + count + '</h1>'

最后，像其他元素一样附加它：

 $('#new_site').append(count);

运行下面的 sn-p 以查看它的实际效果。

function addSite() {
  var new_total_sites = parseInt($('#total_sites').val()) + 1;
  var count = new_total_sites
  var count = '<h1> Mentor' + count + '</h1>'
  if ($('#total_sites').val() >= 5) {
    $('button:contains("Add Mentor")').prop('disabled', true);
  }
  var new_site_label = "<label id='new_label1_" + new_total_sites + 
    "'>Additional Research Participation: </label>";
  var new_site_input = "<input id='new_site_" +
    new_total_sites +
    "' type='text' class='form-control' list='sites' name='site[]'></br>";
  var new_slot_label = "<label id='new_label2_" + new_total_sites +
    "'>Research Institution</label>";
  var new_slot_input = "<input class='form-control' id='new_slot_" +
    new_total_sites + "' name='slots[]'></br>";
  var new_research_label = "<label id='new_label3_" + new_total_sites +
    "'>Research Mentor</label>";
  var new_research_input = "<input class='form-control' id='new_research_" +
    new_total_sites + "' name='slots[]'></br>";
  var new_form_group_label = "<label class= id='new_label4_" + new_total_sites +
    "'>Type of Research</label>";
  var new_basic_label = "<input type='checkbox' id='checkbox1" + new_total_sites + "' value='basic'><label for='basic' id='basic" + new_total_sites + "'>Basic</label></br>";
  var new_clinical_label = "<input type='checkbox' id='checkbox2" + new_total_sites + "' value='clinical'><label for='clinical' id='clinical" + new_total_sites + "'>Clinical</label></br></div>";
  $('#new_site').append(count);
  $('#new_site').append(new_site_label);
  $('#new_site').append(new_site_input);
  $('#new_site').append(new_slot_label)
  $('#new_site').append(new_slot_input);
  $('#new_site').append(new_research_label);
  $('#new_site').append(new_research_input);
  $('#new_site').append(new_form_group_label);
  $('#new_site').append(new_basic_label);
  $('#new_site').append(new_clinical_label)

  $('#total_sites').val(new_total_sites)
}

function removeSite() {
  var last_total_site = $('#total_sites').val();
  if (last_total_site > 1) {
    $('#new_label1_' + last_total_site).remove('');
    $('#new_site_' + last_total_site).remove('');
    $('#new_label2_' + last_total_site).remove('');
    $('#new_slot_' + last_total_site).remove('');
    $('#new_label3_' + last_total_site).remove('');
    $('#new_research_' + last_total_site).remove('');
    $('#new_label4_' + last_total_site).remove('');
    $('#basic' + last_total_site).remove('');
    $('#clinical' + last_total_site).remove('');
    $('#checkbox1' + last_total_site).remove('');
    $('#checkbox2' + last_total_site).remove('');
    $('#total_sites').val(last_total_site - 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=new_site></div>

<button type="button" class="btn btn-default" onClick="addSite()">Add Mentor</button>
<button type="button" class="btn btn-default" onClick="removeSite()">Remove Mentor</button>
<input type="hidden" value="1" id="total_sites">
</br>
</br>