如何从Bootstrap中的多个按钮组非无线电中同时选择一个按钮

问题描述

如果我从一个组中选择一个按钮，则效果很好。但是，如果我从下一个组中选择一个按钮，它将忘记第一个组的选择。我已经多次看到这个问题发布在Stack Overflow上，并且每次解决方案都是为组中的每个按钮赋予一个与另一个组不同的名称。但是，我已经尝试过此解决方案，但仍然只能一次从一个按钮组中选择一个按钮。还有什么可能导致这种情况？

https://getbootstrap.com/docs/4.5/components/button-group/

请在下面查看我的代码：

<form method=”POST”>
        <div id="friendly" class="btn-group" role="group" aria-label="Basic example">
          <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping">ESG Consideration (select one)</span>
          </div>
          <button name="friendly" value="very-high" type="button" class="btn btn-secondary">Very High</button>
          <button name="friendly" value="high" type="button" class="btn btn-secondary">  High   </button>
          <button name="friendly" value="medium" type="button" class="btn btn-secondary"> Medium  </button>
          <button name="friendly" value="low" type="button" class="btn btn-secondary">   Low   </button>
          <button name="friendly" value="very-low" type="button" class="btn btn-secondary"> Very Low</button>
        </div>

        <div id="risk-tolerance" class="btn-group" role="group" aria-label="Basic example">
          <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping">Risk Tolerance (select one)</span>
          </div>
          <button name="risk-tolerance" value="very-high" type="button" class="btn btn-secondary">Very High</button>
          <button name="risk-tolerance" value="high" type="button" class="btn btn-secondary">  High   </button>
          <button name="risk-tolerance" value="medium" type="button" class="btn btn-secondary"> Medium  </button>
          <button name="risk-tolerance" value="low" type="button" class="btn btn-secondary">   Low   </button>
          <button name="risk-tolerance" value="very-low" type="button" class="btn btn-secondary"> Very Low</button>
        </div>
        <p> </p>
</form>

解决方法

我相信您对文档有误解。按钮是按钮，因为它们不是输入，所以无法表示它们是否已选中。通过您的文档链接

通过我们的buttons plugin添加可选的JavaScript单选和复选框样式行为。

如果将其从按钮转换为输入，它将按预期工作。（注意：堆栈代码片段对引导程序不利）

为明确起见，按钮组是设计而不是功能。您实际上需要使用输入作为复选框，或更可能是单选。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<form method=”POST”>
  <div id="friendly" class="btn-group" role="group" aria-label="Basic example">
    <div class="input-group-prepend">
      <span class="input-group-text" id="addon-wrapping">ESG Consideration (select one)</span>
    </div>
    <label class="btn btn-secondary">
                <input name="friendly" value="very-high" type="radio">Very High
            </label>
    <label class="btn btn-secondary">
                <input name="friendly" value="high" type="radio"> High
            </label>
    <label class="btn btn-secondary">
                <input name="friendly" value="medium" type="radio"> Medium
            </label>
    <label class="btn btn-secondary">
                <input name="friendly" value="low" type="radio"> Low
            </label>
    <label class="btn btn-secondary">
                <input name="friendly" value="very-low" type="radio"> Very Low
            </label>
  </div>

  <div id="risk-tolerance" class="btn-group" role="group" aria-label="Basic example">
    <div class="input-group-prepend">
      <span class="input-group-text" id="addon-wrapping">Risk Tolerance (select one)</span>
    </div>
    <label class="btn btn-secondary">
                <input name="risk-tolerance" value="very-high" type="radio">Very High
            </label>
    <label class="btn btn-secondary">
                <input name="risk-tolerance" value="high" type="radio"> High
            </label>
    <label class="btn btn-secondary">
                <input name="risk-tolerance" value="medium" type="radio"> Medium
            </label>
    <label class="btn btn-secondary">
                <input name="risk-tolerance" value="low" type="radio"> Low
            </label>
    <label class="btn btn-secondary">
                <input name="risk-tolerance" value="very-low" type="radio"> Very Low
            </label>
  </div>
  <p> </p>

</form>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

bootstrap-4 html