第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何限制 JavaScript 中按鈕上添加的字段數(shù)量？

如何限制 JavaScript 中按鈕上添加的字段數(shù)量？

明月笑刀無情 2023-09-21 17:28:09
我有一個代碼，其中有兩個按鈕，用于添加和刪除表單字段。我想將添加選項(xiàng)的數(shù)量限制為 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)   }
查看完整描述

1 回答

?
holdtom

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個贊

這是一種方法。- 我已將以下檢查添加到您的代碼中：

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

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

我在本例中禁用了該按鈕，但您可以通過執(zhí)行類似的檢查來執(zhí)行適合您偏好的操作。

編輯： 要回答評論中的問題，您可以通過設(shè)置計(jì)數(shù)來添加編號標(biāo)題，如下所示：

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

然后將計(jì)數(shù)包含在新元素中，如下所示：

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

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

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

運(yùn)行下面的代碼片段以查看其實(shí)際效果。

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>


查看完整回答
反對 回復(fù) 2023-09-21
  • 1 回答
  • 0 關(guān)注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號