javascript - 以编程方式单击单选输入时，jQuery 更改不会触发

Question

我有一些 type="radio"的输入:

<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 个单选按钮。所以我希望检查第一台 radio 。我尝试过:

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

和

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

虽然上面的两个代码都设置了第一个 radio 的选中属性，但对于它们中的任何一个，$('input:radio[name="cei"]').change() 都没有别着火。

Answer 1

您可以在更改值后触发更改事件。

$('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>