Jquery-Klonelemente: Probleme, die überprüfte Optionsfelder behalten

Question

Ich habe dieses Formular erstellt, mit dem Sie mehrere Instanzen eines "Dings" erstellen können ... Grundsätzlich sind die notwendigen Felder für das "Dings" in einem Abschnitt eingeschlossen. Wenn der Benutzer auf die Schaltfläche "Mehr hinzufügen" klickt, kopiere ich den letzten Abschnitt der Serie mit dem Jquery-Klon und fügt ihn vor der Schaltfläche "Mehr hinzufügen" ein. Ich lösche alle Felder in der neuen Sektion mit einigen Jquery.

Das Ding über dieses Formular, das ich gebaut habe, ist, dass Sie Informationen in den Feldern eines beliebigen Abschnitts ausfüllen können, aber wenn Sie dann entscheiden, dass Sie keinen bestimmten Abschnitt mehr möchten, können Sie ihn einfach löschen. Dann habe ich ein Skript, das die restlichen Abschnitte durchläuft, alle Elementattribute und -elemente neu nummeriert, sodass alles entsprechend nummeriert ist (einfacher, das Formular nach der Übergabe mit PHP zu verarbeiten) und die restlichen Informationen, die Sie eingegeben haben wird beibehalten - auch nachdem Elemente und Attribute neu nummeriert wurden.

Hier ist ein Stift: http://codepen.io/JonnyNineToes/pen/AgEax

obligatorischer Code:

// when the user clicks the "add more" button... 
$('.add_btn').click(function(){ 
    // clone the previous element (a "repeatable" element), and insert it before the "add more" button 
    $(this).prev('.repeatable').clone().insertBefore(this).html(); 
    // get the number of repeatable elements on the page 
    var num = $('.repeatable').length; 
    // again, get the previous element (a "repeatable" element), and change the header to reflect it's new index 
    $(this).prev('.repeatable').children('h2').html('Person ' + num); 
    // now, go through all text boxes within the last "repeatable" element... 
    $('.repeatable').last().find('input').each(function(){ 
    // ...change their "structure" data attributes to reflect the index+1 value of the "repeatable" element 
    dattr = $(this).data('structure') + num; 
    $(this).attr({ 
     'id':dattr, 
     'name':dattr 
    // update the "for" attribute on the parent element (label) 
    }).parent('label').attr('for',dattr); 
    // clear the input field contents of the new "repeatable" 
    // if the type of the input is "radio"... 
    if ($(this).attr('type') == 'radio') { 
     // remove the checked attribute 
     /*$(this).removeAttr('checked');*/ 
    // for all other inputs... 
    } else { 
     // clear the value... 
     $(this).val(''); 
    } 
    }); 
    // run the "destroy" method... I forget why... just do it, and don't gimme no lip. 
    destroy(); 
    updateRemoveLinks(); 
}); 

Das Problem, das ich habe, ist mit Radio-Buttons. Wenn ich im letzten Abschnitt auf eine der Optionsschaltflächen klicke und dann auf "Mehr hinzufügen" klicke, um einen weiteren Abschnitt hinzuzufügen, werden die Optionsfelder in dem Abschnitt, der geklont wird, leer (und nicht ausgewählt) und stattdessen in den neuen Bereich kopiert . Probieren Sie den Stift ... Klicken Sie auf eine der Optionsschaltflächen in der Sektion, und klicken Sie dann auf "Mehr hinzufügen". Du wirst sehen, was ich meine.

Ich kann wirklich nicht herausfinden, was ich hier falsch gemacht habe, dass es das tut ... Oder wenn es etwas gibt, das ich vergesse oder übersehen habe?

Answer 1

Vor allem den neuen Radioeingang deaktivieren Sie

$(this).prop("checked",false); 

Zweitens ursprünglichen Radioeingang nicht aktiviert ist immer da im Moment des Klonens es verwendet werden sollen, hat das neue Element die gleichen Namen und ID von der ursprünglichen, und Sie ändern es nach dem Klonen, was nicht hilft.

Ein Weg, dies zu vermeiden, wäre einfach das Original Radio Speicher und es nach dem Klonen und Namen zu ändern Zurücksetzen wird, erfolgt wie folgt:

$('.add_btn').click(function(){ 
    // clone the previous element (a "repeatable" element), and insert it before the "add more" button 

    // save the original checked radio button 
    var original = $('.repeatable').last().find(':checked'); 
    $(this).prev('.repeatable').clone().insertBefore(this).html(); 
    // get the number of repeatable elements on the page 
    var num = $('.repeatable').length; 
    // again, get the previous element (a "repeatable" element), and change the header to reflect it's new index 
    $(this).prev('.repeatable').children('h2').html('Person ' + num); 
    // now, go through all text boxes within the last "repeatable" element... 
    $('.repeatable').last().find('input').each(function(){ 
     // ...change their "structure" data attributes to reflect the index+1 value of the "repeatable" element 
     dattr = $(this).data('structure') + num; 
     $(this).attr({ 
     'id':dattr, 
     'name':dattr 
     // update the "for" attribute on the parent element (label) 
     }).parent('label').attr('for',dattr); 
     // clear the input field contents of the new "repeatable" 
     // if the type of the input is "radio"... 
     if ($(this).attr('type') == 'radio') { 
     // remove the checked attribute 
     $(this).prop('checked',false); 
     // for all other inputs... 
     } else { 
     // clear the value... 
     $(this).val(''); 
     } 
     // check if there's a checked radio button, and restore it 
     if (original.length == 1) { 
      original.prop('checked',true); 
     } 
    }); 

Arbeitsbeispiel: http://codepen.io/anon/pen/ByKEYJ?editors=101

ich auch hinzugefügt Werte zu den Optionsfeldern.