触发复选框的更改事件

Question

触发复选框的更改事件

3

我有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 事件（如上面的代码所示），从文本区域中删除该选中框的值。我尝试使用 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"));  
    });
});

- Raaman Rai

你为什么这样做，意味着你有什么需求？ - itzmukeshy7

你想要这样的东西吗？https://jsfiddle.net/vj2g18ka/1/ - Vincent G

如果你只触发变化，视觉状态不会改变，请查看 Fiddle。 - Yuri

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron Franco · Accepted Answer

这对我来说似乎有效：

$(".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/