JavaScript / JQuery:只启用一些复选框,禁用其他复选框
JavaScript / JQuery : Enable only some checkboxes and disable the others
我不太擅长js,所以我在寻求帮助。
我有一个商业计划列表和一堆复选框和单选按钮。
当我用单选选择一个计划时,我想禁用其他计划中的复选框。
这是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检测数据表分页的其他页面中的复选框
- 在其他文本输入字段中输入文本时启用复选框
- 选中一个复选框后,使用html.checkbox自动禁用其他复选框
- 当选中一个复选框时,表单中的所有其他复选框都必须禁用-不工作
- 具有延迟的多个复选框选择以检查其他复选框更改
- Javascript错误,根据其他复选框的结果更新复选框/按钮
- 如果选中了其他复选框,则取消选中复选框
- 使用JavaScript获取widgetVar或选中/取消选中所有其他PrimeFaces复选框
- 仅从表中选中所有复选框,而不从其他表中选中所有复选框
- 复选框在选中时触发函数,如果未选中,则触发其他函数
- 选中后选中所有其他复选框
- 取消选中复选框将取消选中表中的其他复选框
- jQuery - 选中所有/取消选中所有复选框 - 然后取消选中(或选中)其他复选框
- 复选框状态和其他属性
- Jquery如果选中某个复选框,则禁用其他复选框
- 翡翠,如果其他速记选择复选框
- 复选框启用 Onload 以显示其他元素
- 单击具有类似类的复选框时,禁用其他复选框
- 如何在jsp中插入单选按钮、复选框和其他输入类型
- Javascript/JQuery设置复选框的值,同时禁用其他复选框