JQuery klon öğeleri: kontrol edilen radyo düğmelerini koruyan sorunlar

Question

"Şey" in birden çok örneğini oluşturmanıza izin veren bu formu oluşturdum ... Temel olarak "şey" için gerekli alanlar bir bölümün içinde yer almaktadır. Kullanıcı bir "daha fazla ekle" düğmesine tıkladığında, dizideki son bölüm öğesini kopyalamak için Jquery'nin klonunu kullanır ve "daha fazla ekle" düğmesinden önce ekler. Yeni bölümdeki bazı alanları JQuery ile temizliyorum.

Oluşturduğum bu formla ilgili olan şey, herhangi bir bölümün alanlarındaki bilgileri doldurabilmenizdir, ancak artık belirli bir bölümü istemediğinize karar verdiğinizde, onu silebilirsiniz. Daha sonra, kalan bölümleri geçecek, tüm eleman niteliklerini ve elemanlarını yeniden numaralandıracak bir komut dosyası var, böylece her şey uygun şekilde numaralandırıldı (gönderildikten sonra formu PHP ile işlemek daha kolay) ve girdiğiniz diğer bilgiler öğeler ve nitelikler yeniden numaralandırıldıktan sonra bile korunacaktır. http://codepen.io/JonnyNineToes/pen/AgEax

Zorunlu kod:

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

I having radyo düğmeleri ile

İşte, bir kalem. Son bölümdeki radyo düğmelerinden birine tıklar ve daha sonra başka bir bölüm eklemek için "daha fazla ekle" ye tıklarsam, klonlanan bölümdeki radyo düğmeleri boştur (hiçbiri seçilmez) ve bunun yerine yeni bölüme kopyalanır. . Kalemi deneyin ... bölümdeki radyo düğmelerinden birine tıklayın ve daha sonra "ekle" ye tıklayın. Ne demek istediğimi göreceksin.

Burada yanlış yaptıklarımı burada anlayamıyorum, bunu yapıyor ... Ya da unuttuğum veya aşırı baktığım bir şey varsa?

Her

Answer 1

Önce,

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

İkinci kullanmalıdır yeni radyo girişi işaretini kaldırın, orijinal radyo girişi çünkü klonlama anındaki kontrolsüz almak olduğunu, yeni eleman aynı ad ve kimliği var Orijinal olanı ve klonlamadan sonra değiştirirsiniz, bu da yardımcı olmaz.

sadece orijinal radyo tasarrufu ve klonlama ve ad değiştirdikten sonra sıfırlayarak olacak bu önleme şekli şöyle, yapılır:

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

Çalışma örneği: Ben de eklendi http://codepen.io/anon/pen/ByKEYJ?editors=101

radyo düğmelerine değerler.