触发复选框的更改事件答案

【问题标题】：Trigger change event of a checkbox触发复选框的更改事件
【发布时间】：2016-04-15 12:20:01
【问题描述】：

我有 7 个复选框（A、B、C、D、E、F、G），当我单击其中一个时，该值将附加到文本区域。如果我取消选中一个，该值将从 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>

现在，当我点击复选框“C”时，以下复选框 D、E、F、G 应该被禁用，如果这些复选框中的任何一个已经处于选中状态，那么它应该取消选中并且触发 on change 事件（如上面代码中突出显示的），它将从 textarea 中删除该复选框的值。我曾尝试使用 trigger("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"));  
    });
});

【问题讨论】：

你为什么这样做意味着你需要什么？
你想要这样的东西吗？ jsfiddle.net/vj2g18ka/1
如果只触发变化，视觉状态没有变化，查看Fiddle

标签： javascript jquery html checkbox

【解决方案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/

【讨论】：

谢谢......它就像魅力一样。我没有使用 $(document).ready(function() { }