Elementy klonowania jquery: problemy z zachowaniem zaznaczonych przycisków radiowych

Question

Utworzono ten formularz, który umożliwia tworzenie wielu wystąpień "rzeczy" ... Zasadniczo niezbędne pola dla "rzeczy" są zawarte w sekcji. Kiedy użytkownik kliknie przycisk "dodaj więcej", użyję klonu Jquery'ego do skopiowania ostatniego elementu sekcji w serii i wstawi go przed przyciskiem "dodaj więcej". Usuwam dowolne pola w nowej sekcji z jquery.

Rzeczą, którą zbudowałem, jest to, że możesz wypełniać informacje w polach dowolnej sekcji, ale wtedy, gdy zdecydujesz, że nie chcesz już danej sekcji, możesz po prostu ją usunąć. Następnie mam skrypt, który przejdzie przez pozostałe sekcje, zmieniając ponownie wszystkie atrybuty elementów i elementy, tak aby wszystko było odpowiednio ponumerowane (łatwiejsze przetwarzanie formularza za pomocą PHP po przesłaniu), a pozostałe informacje, które wprowadziłeś nadal będzie zachowywany - nawet po ponownej numeracji elementów i atrybutów.

Oto pióro: http://codepen.io/JonnyNineToes/pen/AgEax

kod obligatoryjnie:

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

Problem mam jest z przycisków radiowych. Jeśli klikam jeden z przycisków opcji w ostatniej sekcji, a następnie klikam "dodaj więcej", aby dodać kolejną sekcję po nim, przyciski radiowe puste (brak zaznaczenia) w sekcji, która zostanie sklonowana, a zamiast tego zostaną skopiowane do nowej sekcji . Wypróbuj pióro ... kliknij jeden z przycisków opcji w sekcji, a następnie kliknij "dodaj więcej". Zobaczycie, co mam na myśli.

Naprawdę nie mogę zrozumieć, co zrobiłem źle tutaj, że to robi ... A może jest coś, o czym zapomniałem lub przeoczyłem?

Answer 1

Przede wszystkim, aby odznaczyć nowe wejście radia należy użyć

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

drugie, oryginalny input radio jest coraz niekontrolowany, ponieważ w momencie klonowania to nowy element ma taką samą nazwę i identyfikator oryginalnego, i zmieniasz go po klonowaniu, co nie pomaga.

Sposobem na uniknięcie tego byłoby po prostu oszczędność oryginalnego radia i zerowania po zmianie klonowania i nazwisko jest zrobione, tak jak poniżej: przykład

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

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

Dodałem też wartości do przycisków radiowych.