触发复选框的更改事件

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/