如何限制 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)   }

Answer 1

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

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

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

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

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

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

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

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

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

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

运行下面的代码片段以查看其实际效果。

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>