在 jquery 中增加克隆输入的名称属性

Question

我有一个表单的特定部分（一个选择框和三个复选框），需要根据要求进行复制。 我有 div 的克隆工作以及该特定 div 的递增，但是我在递增复选框本身以使其独一无二时遇到了问题。

这是我的 HTML：

<div class="orgboxdupe" style="border: 1px solid lightgrey; padding-left:20px;padding-right:20px;padding-bottom:20px;margin-top:10px; width: 600px;">
   <h3>Add user to an organization</h3>
   <select id="orggroupadd" class="user_groupadd" name="user_orggroupadd[]">
      <option value="none">Select an organization</option>
      <option value="152">Test4</option>
      <option value="156">test9</option>
   </select>
   <br><br>Organization Admin (can view uploaded files): <input type="checkbox" name="orgadmincheckbox2"><br><br>c3 Access: <input type="checkbox" name="c3checkbox2"> c4 Access: <input type="checkbox" name="c4checkbox2">
</div>

单击按钮时，它会创建一个带有递增 ID 的新 orgboxdupe 框，但由于某种原因，它会递增第一个 div 复选框的数字，而不是随后克隆的复选框：

这是我的 JS

//Portalorgs - add Users
//Vars
let  $addnewgroupbutton = jQuery( "#addnewgroup" );
let  $mainelement = jQuery("#orguserbox");
let  $dupebox = jQuery(".orgboxdupe");
let  $selectboxid = jQuery("#orggroupadd");
let   $checkboxes = jQuery("input[type='checkbox']");
let  $cloneindex = 1;

//Duplicating add organizations box for users - po-addusers.php
$addnewgroupbutton.click(function() {
    $cloneindex++;
    $dupebox.clone().appendTo($mainelement).attr("id","user_orggroupadd" + $cloneindex).find(':checked').attr('checked', false);
    $checkboxes.each(function(){
    jQuery(this).attr("name",jQuery(this).attr("name") + $cloneindex);
  });
  console.log($cloneindex);
});

感谢您提供的任何帮助。

Answer 1

正如@Taplar $checkboxes所指出的，引用了原始复选框。 因此，每次单击时它们都会更新。

您需要引用刚刚复制的克隆中的checkboxes ； 您可以像这样使用链接：

    ....
    .end().find(':checkbox').attr('name', function() {
        return this.name + $cloneindex;
    }); 

 //Portalorgs - add Users //Vars let $addnewgroupbutton = jQuery( "#addnewgroup" ); let $mainelement = jQuery("#orguserbox"); let $dupebox = jQuery(".orgboxdupe"); let $selectboxid = jQuery("#orggroupadd"); let $checkboxes = jQuery("input[type='checkbox']"); let $cloneindex = 1; //Duplicating add organizations box for users - po-addusers.php $addnewgroupbutton.click(function() { $cloneindex++; $dupebox.clone().appendTo($mainelement).attr("id","user_orggroupadd" + $cloneindex).find(':checked').attr('checked', false) //operate on the close via method chaining .end().find(':checkbox').attr('name', function() { return this.name + $cloneindex; }); /*$checkboxes.each(function(){ jQuery(this).attr("name",jQuery(this).attr("name") + $cloneindex); });*/ //console.log($cloneindex); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="addnewgroup">Add New Group</button> <div id="orguserbox"> <div class="orgboxdupe" style="border: 1px solid lightgrey; padding-left:20px;padding-right:20px;padding-bottom:20px;margin-top:10px; width: 600px;"> <h3>Add user to an organization</h3> <select id="orggroupadd" class="user_groupadd" name="user_orggroupadd[]"> <option value="none">Select an organization</option> <option value="152">Test4</option> <option value="156">test9</option> </select> <br><br>Organization Admin (can view uploaded files): <input type="checkbox" name="orgadmincheckbox2"><br><br>c3 Access: <input type="checkbox" name="c3checkbox2"> </div> </div>