チェックボックスの変更イベントをトリガー

Question

私は7つのチェックボックス（A、B、C、D、E、F、G）を持っていて、それらのいずれかをクリックすると、値がテキストエリアに追加されます。チェックを外すと、値はテキストエリアから削除されます。 jqueryのコードは以下の通りです：

var checkboxes = $("input[type='checkbox']"); 

checkboxes.on('change', function() { 
    $('#recipient').val(
     checkboxes.filter(':checked').map(function(item) { 
      return this.value; 
    }).get().join('; ') 
); 
}); 

htmlコードは以下の通りである：ここでは、今

<div class="col-sm-5">   
     <div class="form-group"> 
      <label>Recipient</label> 
      <textarea class="form-control" rows="5" id="recipient"></textarea> 
     </div>   
     <div class="form-group"> 
      <label>Message</label> 
      <textarea class="form-control" rows="5"></textarea> 
     </div>    
     <button type="submit" class="btn btn-default">Submit</button> 
     <button type="reset" class="btn btn-default">Reset</button>   
    </div> 
<div class="col-sm-5"> 
     <label>&nbsp;</label> 
     <div class="col-sm-12"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Address Book</h3> 
       </div> 
       <div class="panel-body"> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="member" value="A">A 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="member" value="B">B 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="firm" value="C">C 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="firm" value="D">D 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="firm" value="E">E 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="firm" value="F">F 
         </label> 
        </div> 
        <div class="checkbox"> 
         <label> 
          <input type="checkbox" class="firm" value="G">G 
         </label> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

私はチェックボックス「C」をクリックして状況は、次のチェックボックスD、E 、F、Gは無効にする必要があります。チェックボックスのいずれかがすでにチェック状態にある場合は、そのチェックボックスの値をテキストエリアから削除するon changeイベント（コードで上に強調表示されているように） 。私はトリガー（ "変更"）オプションを使用しようとしましたが、運が見つかりませんでした。私を助けてください！

以下のコードでは、チェックボックスDだけでトリガーイベントを試してみましたが、動作しているかどうかを確認してください。

$(function(){ 
    $(".firm[value='C']").change(function(){ 
     $(".firm[value='D']").prop('checked', false).trigger("change"); 
     $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked")); 
    }); 
}); 

Answer 1

これは私のために働くようだ：

$(".firm[value='C']").change(function(){ 
     $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change"); 
     $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked")); 
    }); 

あなたがここにアクションでそれを見ることができます。 https://jsfiddle.net/aaronfranco/cvhphzgq/2/