Javascript

Question

anoter tıklanan öğeye dayalı en yakın öğeyi bulun Yeni satır ekleyebilir, satır silebilirsiniz dinamik bir form var. 2 .row s olduğu

// HTML 
<div class="row"> 
    <div class="col-xs-4"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="landmark" type="checkbox" value="4" name="patient[block_procedure_part2_notes_attributes][0][monitoring_device_ids][]" id="patient_block_procedure_part2_notes_attributes_0_monitoring_device_ids_4" /></li> 
     <li><input type="checkbox"></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
    <div class="col-xs-8"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][0][us_image]" id="patient_block_procedure_part2_notes_attributes_0_us_image_clear" /></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][0][us_image]" id="patient_block_procedure_part2_notes_attributes_0_us_image_poor" /></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-4"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="landmark" type="checkbox" value="4" name="patient[block_procedure_part2_notes_attributes][1][monitoring_device_ids][]" id="patient_block_procedure_part2_notes_attributes_1_monitoring_device_ids_4" /></li> 
     <li><input type="checkbox"></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
    <div class="col-xs-8"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][1][us_image]" id="patient_block_procedure_part2_notes_attributes_1_us_image_clear" /></li> 
     <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][1][us_image]" id="patient_block_procedure_part2_notes_attributes_1_us_image_poor" /></li> 
     <li><input type="checkbox"></li> 
    </ul> 
    </div> 
</div> 

// Javascript 
var landmark = $('input.landmark'); 

landmark.change(function(event) { 
    var usImageOptions = $(event.target).closest('input.us_image'); 
    if (landmark.prop('checked')) { 
    resetInputs(usImageOptions); 
    controlFormSub(); 
    disableInputs(usImageOptions, true); 
    } else { 
    disableInputs(usImageOptions, false); 
    } 
}); 

görebilirsiniz: İşte kod. Ekleme düğmesiyle daha fazla satır eklenebilir veya kaldır düğmesiyle kaldırılabilir.

Burada, kontrol edilen en yakın .landmark numarasına karşılık gelen usImageOptions radyo düğmelerini devre dışı bırakmaya çalışıyorum. 1 .row numaralı telefondan .landmark işaretliyse, 1 .row ürününün .usImageOptions temizlenmiş ve devre dışı bırakılmalıdır. 2. .row, sağlam olmalıdır.

Diğer sınıflara göre bulmaya isteksizim çünkü eğer değiştiyse, bu kod kırılacaktı.

Aynı satır içinde .usImageOptions seçmek için sayısız yolu denedim ama yapamadı. Ne yapmalıyım? jQuery kullanıyorsanız

Answer 1

kullanarak sona erdi .us_image içinde bulunan .row.

Answer 2

, oradan da radyo düğmeleri .row ebeveyn kapmak ve seçebilirsiniz:

$('.landmark').on('change', function(e){ 
    $(this).parents('.row').find('.us_image').prop('disabled', true); 
}); 

EDIT: Eğer daha fazla satır ekliyoruz yana, büyük olasılıkla kullanmanız gerekir Eklenen tüm satırları yakalayabilmeniz için etkinlik temsilcisi. Ardından bakmak

var usImageOptions = $(event.target).closest('.row').find('.us_image'); 

Bu ilk önce, tıklanan elemanı tespit yakın .row arayacaktır (birçok olmasına rağmen, ancak yalnızca en yakın yukarıdaki seçecektir):

$(document.body).on('change', '.landmark', function(e){ 
    $(this).parents('.row').find('.us_image').prop('disabled', true); 
});