JavaScript / JQuery ：仅启用一些复选框并禁用其他复选框

Question

我对js不是很熟练，所以我寻求帮助。

我有一个 commercial plans 列表和一堆复选框和单选按钮。

当我 select 一个带有收音机的计划时，我想禁用其他计划的复选框。

这是 dom 的一部分：

{% for plan in plans %}
    <div class="row alert alert-info">
        <div class="col-md-12">
            <div>{{ plan['name'] }}</div>
            <div>{{ plan['description'] }}</div>
            <div>{{ plan['recurring_price'] }} €</div>
            <div>{{ plan['interval_unit'] }}</div>
            <div><br/></div>
            <div style="padding-left: 20px">
                {% for addon in plan.addons %}
                    {% if addon['type'] == 'recurring' %}
                        <div>{{ addon['name'] }}</div>
                        <div>{{ addon['description'] }}</div>
                        <div>{{ addon['price_brackets'][0]['price'] }} €</div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="{{ addon['addon_code'] }}" class="checkboxAddon" value="{{ addon['addon_code'] }}"> : Choose addon
                            </label>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="choosePlan" id="{{ plan['plan_code'] }}" value="{{ plan['plan_code'] }}"> : Choose plan
                </label>
            </div>
        </div>
    </div>
    <br/>
{% endfor %}

我已经想到了通过类和 DOM 遍历来实现这一点的可能方法，但没有想到什么优雅的方法。

感谢所有愿意花时间回复的人。

Answer 1

这样的方法可能有用；

jQuery(function($) {
    $(document).on('change', '.row .radio :radio', function(e) {
        var $this = $(this),
            $plan = $this.closest('.row'),
            $otherPlans = $('.row').not($plan);
        $plan.find(':checkbox').prop('disabled', false);
        $otherPlans.find(':checkbox').prop('disabled', true);
    });
});

JavaScript / JQuery ：仅启用一些复选框并禁用其他复选框

JavaScript / JQuery : Enable only some checkboxes and disable the others

html

javascript

checkbox

jquery

twig