我有两个 Bootstrap 按钮组切换。两个选项都可以关闭,但只有一个可以打开。如果选项 1 打开,选项 2 应该关闭。如果选项 2 打开,则选项 1 应该关闭。可以这样做吗?
HTML:
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
<label class="btn btn-secondary" id="option1_on">
<input type="radio" name="options_option1" value="on"> On
</label>
<label class="btn btn-secondary" id="option1_off">
<input type="radio" name="options_option1" value="off"> Off
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
<label class="btn btn-secondary" id="option2_on">
<input type="radio" name="options_option2" value="on"> On
</label>
<label class="btn btn-secondary" id="option2_off">
<input type="radio" name="options_option2" value="off"> Off
</label>
</div>
这是我用 javascript 尝试的:
$(function() {
$("#option1 input:radio").change(function() {
var optionValue = $(this).val();
if (optionValue == 'on'){
//Option2 must be off
$("#option2_off").button('toggle');
}
});
$("#option2 input:radio").change(function() {
var optionValue = $(this).val();
if (optionValue == 'on'){
//Option1 must be off
$("#option1_on").button('dispose');
}
});
});
这不能正常工作。
编辑1
答案在 bootstrap 4 上无效 DEMO
最佳答案
您可以选择被点击元素的 sibling 并找到值为 off
的 input
并使用 jquery 设置其 checked
值。它也适用于 2 个以上的组 DEMO
$(".btn-group-toggle input:radio").on('change', function() {
let val = $(this).val();
if (val == 'on') {
var sibling = $(this)
.parents('.btn-group-toggle')
.siblings()
.find('input[value="off"]')
.prop('checked', true)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option1">
<label class="btn btn-secondary" id="option1_on">
<input type="radio" name="options_option1" value="on"> On
</label>
<label class="btn btn-secondary" id="option1_off">
<input type="radio" name="options_option1" value="off"> Off
</label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="option2">
<label class="btn btn-secondary" id="option2_on">
<input type="radio" name="options_option2" value="on"> On
</label>
<label class="btn btn-secondary" id="option2_off">
<input type="radio" name="options_option2" value="off"> Off
</label>
</div>
关于javascript - Bootstrap btn-group-toggle 根据值更改另一个组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48460262/