javascript - 增加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 引用原始复选框。因此，每次点击时它们都会更新。

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

    ....
    .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>