我对js不是很熟练,所以我寻求帮助。
我有一个列表 commercial plans以及一堆复选框和单选按钮。
当我选择带有 radio 的计划时,我想禁用其他计划中的复选框。
这是 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 遍历来实现这一点的可能方法,但没有想到任何优雅的方法。
感谢大家花时间回复。
最佳答案
像这样的东西可能会起作用;
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 : Enable only some checkboxes and disable the others,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33085323/