javascript - Bootstrap btn-group-toggle 根据值更改另一个组

Question

我有两个 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

Answer 1

您可以选择被点击元素的 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>