Elementi di clonaggio Jquery: problemi di ritenzione dei pulsanti di scelta controllati

Question

Ho creato questo modulo che consente di creare più istanze di una "cosa" ... Fondamentalmente i campi necessari per la "cosa" sono tutti racchiusi all'interno di una sezione. Quando l'utente fa clic su un pulsante "aggiungi altro", utilizzo il clone di Jquery per copiare l'ultimo elemento della sezione della serie e lo inserisce prima del pulsante "aggiungi altro". Ho cancellato tutti i campi nella nuova sezione con alcuni Jquery.

La cosa su questo modulo che ho creato è che puoi compilare le informazioni nei campi di qualsiasi sezione, ma quando decidi che non vuoi più una sezione specifica, puoi semplicemente cancellarla. Poi ho uno script che passerà attraverso le restanti sezioni, ri-numerando tutti gli attributi e gli elementi degli elementi, in modo che tutto sia numerato in modo appropriato (più facile elaborare il modulo con PHP dopo l'invio) e le informazioni rimanenti che hai inserito verrà comunque mantenuto, anche dopo il ri-numerazione di elementi e attributi.

Ecco una penna: http://codepen.io/JonnyNineToes/pen/AgEax

codice obbligatorio:

// 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(); 
}); 

Il problema che sto avendo è con pulsanti di opzione. Se clicco su uno dei pulsanti di opzione nell'ultima sezione e poi clicco su "aggiungi altro" per aggiungere un'altra sezione dopo di essa, i pulsanti radio si svuotano (nessuno selezionato) nella sezione che viene clonata, e invece vengono copiati nella nuova sezione . Prova la penna ... fai clic su uno dei pulsanti di opzione nella sezione, quindi fai clic su "aggiungi altro". Vedrai cosa intendo.

Non riesco davvero a capire cosa ho fatto di sbagliato qui che lo fa ... O se c'è qualcosa che sto dimenticando o che ho dimenticato?

Answer 1

Prima di tutto, per deselezionare il nuovo ingresso radio si dovrebbe usare

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

In secondo luogo, il vostro input radio originale è sempre incontrollato perché al momento della clonazione, il nuovo elemento ha lo stesso nome e l'ID di quello originale, e lo cambi dopo la clonazione, il che non aiuta.

Un modo per evitare questo sarebbe semplicemente salvare la radio originale e il ripristino dopo la clonazione e il nome che cambia è fatto, in questo modo: ad esempio

$('.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); 
     } 
    }); 

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

Ho anche aggiunto valori ai pulsanti radio.