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

这是一种方法。- 我已将以下检查添加到您的代码中：&nbsp;&nbsp;if&nbsp;($('#total_sites').val()&nbsp;>=&nbsp;5)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('button:contains("Add&nbsp;Mentor")').prop('disabled',&nbsp;true); &nbsp;&nbsp;}它的作用是检查 div 中元素的值#total_sites。如果该值大于或等于 5，它将禁用Add Mentor button.我在本例中禁用了该按钮，但您可以通过执行类似的检查来执行适合您偏好的操作。编辑：&nbsp;要回答评论中的问题，您可以通过设置计数来添加编号标题，如下所示：&nbsp;&nbsp;var&nbsp;count&nbsp;=&nbsp;$('#total_sites').val();然后将计数包含在新元素中，如下所示：var&nbsp;count&nbsp;=&nbsp;'<h1>&nbsp;Mentor'&nbsp;+&nbsp;count&nbsp;+&nbsp;'</h1>'最后，像其他元素一样附加它：&nbsp;$('#new_site').append(count);运行下面的代码片段以查看其实际效果。function addSite() {&nbsp; var new_total_sites = parseInt($('#total_sites').val()) + 1;&nbsp; var count = new_total_sites&nbsp; var count = '<h1> Mentor' + count + '</h1>'&nbsp; if ($('#total_sites').val() >= 5) {&nbsp; &nbsp; $('button:contains("Add Mentor")').prop('disabled', true);&nbsp; }&nbsp; var new_site_label = "<label id='new_label1_" + new_total_sites +&nbsp;&nbsp; &nbsp; "'>Additional Research Participation: </label>";&nbsp; var new_site_input = "<input id='new_site_" +&nbsp; &nbsp; new_total_sites +&nbsp; &nbsp; "' type='text' class='form-control' list='sites' name='site[]'></br>";&nbsp; var new_slot_label = "<label id='new_label2_" + new_total_sites +&nbsp; &nbsp; "'>Research Institution</label>";&nbsp; var new_slot_input = "<input class='form-control' id='new_slot_" +&nbsp; &nbsp; new_total_sites + "' name='slots[]'></br>";&nbsp; var new_research_label = "<label id='new_label3_" + new_total_sites +&nbsp; &nbsp; "'>Research Mentor</label>";&nbsp; var new_research_input = "<input class='form-control' id='new_research_" +&nbsp; &nbsp; new_total_sites + "' name='slots[]'></br>";&nbsp; var new_form_group_label = "<label class= id='new_label4_" + new_total_sites +&nbsp; &nbsp; "'>Type of Research</label>";&nbsp; 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>";&nbsp; 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>";&nbsp; $('#new_site').append(count);&nbsp; $('#new_site').append(new_site_label);&nbsp; $('#new_site').append(new_site_input);&nbsp; $('#new_site').append(new_slot_label)&nbsp; $('#new_site').append(new_slot_input);&nbsp; $('#new_site').append(new_research_label);&nbsp; $('#new_site').append(new_research_input);&nbsp; $('#new_site').append(new_form_group_label);&nbsp; $('#new_site').append(new_basic_label);&nbsp; $('#new_site').append(new_clinical_label)&nbsp; $('#total_sites').val(new_total_sites)}function removeSite() {&nbsp; var last_total_site = $('#total_sites').val();&nbsp; if (last_total_site > 1) {&nbsp; &nbsp; $('#new_label1_' + last_total_site).remove('');&nbsp; &nbsp; $('#new_site_' + last_total_site).remove('');&nbsp; &nbsp; $('#new_label2_' + last_total_site).remove('');&nbsp; &nbsp; $('#new_slot_' + last_total_site).remove('');&nbsp; &nbsp; $('#new_label3_' + last_total_site).remove('');&nbsp; &nbsp; $('#new_research_' + last_total_site).remove('');&nbsp; &nbsp; $('#new_label4_' + last_total_site).remove('');&nbsp; &nbsp; $('#basic' + last_total_site).remove('');&nbsp; &nbsp; $('#clinical' + last_total_site).remove('');&nbsp; &nbsp; $('#checkbox1' + last_total_site).remove('');&nbsp; &nbsp; $('#checkbox2' + last_total_site).remove('');&nbsp; &nbsp; $('#total_sites').val(last_total_site - 1);&nbsp; }}<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>