觸發復選框的更改事件

Question

我有7個復選框（A，B，C，D，E，F，G），當我單擊其中一個時，該值將附加到textarea。 如果我取消選中一個，則會從textarea中刪除該值。 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>

現在，在這種情況下，當我單擊Checkbox“C”時，應禁用以下復選框D，E，F，G以及如果其中任何一個復選框已處於已檢查狀態，則應取消選中並觸發打開更改事件（如上面的代碼中所示），它將從textarea中刪除該復選框的值。 我試圖使用觸發器（“更改”）選項，但找不到運氣。 請幫我！

請注意，在下面的代碼中，我剛剛嘗試了帶有復選框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/