JQuery изменения не срабатывает, когда входы радио щелкают программным

Question

У меня есть несколько входов типа = «радио»:

<div style="margin:10px;"><input type="radio" name="cei" id="clike" /><label style="margin:0 10px" for="clike">like</label></div> 
<div style="margin:10px;"><input type="radio" name="cei" id="ccomment" /><label style="margin:0 10px" for="ccomment">like</label></div> 
<div style="margin:10px;"><input type="radio" name="cei" id="clink" /><label style="margin:0 10px" for="clink">like</label></div> 

и функцию изменения этого делать некоторые вещи, когда каждый из них проверяется:

 $('input:radio[name="cei"]').change(
function(){ 
    if ($(this).is(':checked') && $(this).next().html() == 'link') 
     $('#clink-val').removeAttr('disabled');else $('#clink-val').attr('disabled','disabled'); 
    if ($(this).is(':checked') && $(this).next().html() == 'Multiple Choices') 
    $(this).closest('fieldset').find('.multiplechoices-item').slideDown(); else $(this).closest('fieldset').find('.multiplechoices-item').slideUp(); 
}); 

До настоящего момента код работает отлично. теперь, поскольку переключатели выше генерируются с помощью кода на стороне сервера и могут быть только 2 радио для пользователя и 5 из них для другого пользователя. поэтому я хочу, чтобы первое радио было проверено. Я пробовал:

$('input:radio[name="cei"]').first().attr('checked','checked'); 

и

$('input:radio[name="cei"]').first().click(); 

в то время как оба вышеуказанных кодов устанавливает проверяемый атрибут первого радио, но ни в одной из них $('input:radio[name="cei"]').change() не срабатывает.

Answer 1

вам нужно, чтобы вызвать событие изменения

$('input:radio[name="cei"]').first().prop('checked',true).change(); 

Answer 2

вместо

$('input:radio[name="cei"]').change(function(){}) 

попробовать

$('body').on('change','input:radio[name="cei"]',function(){}) 

динамически добавленный элемент нужен слушатель события, как этот

Answer 3

Вы можете запустить событие изменения после изменения значения.

$('input:radio[name="cei"]').first().attr('checked','checked').change(); 

$('input:radio[name="cei"]').change(function(){ 
 
    console.log('changed'); 
 
    if ($(this).is(':checked') && $(this).next().html() == 'link') 
 
     $('#clink-val').removeAttr('disabled');else $('#clink-val').attr('disabled','disabled'); 
 
    if ($(this).is(':checked') && $(this).next().html() == 'Multiple Choices') 
 
    $(this).closest('fieldset').find('.multiplechoices-item').slideDown(); else $(this).closest('fieldset').find('.multiplechoices-item').slideUp(); 
 
}); 
 

 

 
$('input:radio[name="cei"]').first().attr('checked','checked').change(); 
 
$('input:radio[name="cei"]').eq(1).attr('checked','checked').change(); 
 
$('input:radio[name="cei"]').eq(1).attr('checked','checked').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="margin:10px;"> 
 
    <input type="radio" name="cei" id="clike" /><label for="clike">like</label> 
 
</div> 
 
<div style="margin:10px;"> 
 
    <input type="radio" name="cei" id="ccomment" /><label for="ccomment">like</label> 
 
</div> 
 
<div style="margin:10px;"> 
 
    <input type="radio" name="cei" id="clink" /><label for="clink">like</label> 
 
</div>