Блог

Если я выбираю кнопку из одной группы, она работает нормально. Но затем, если я выбираю кнопку из следующей группы, она забывает о выборе первой группы. Это проблема, которую я много раз видел в 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>
  

Я полагаю, вы неправильно понимаете документацию. Кнопки — это кнопки, нет способа указать, отмечены они или нет, поскольку они не являются входными данными. Из вашей ссылки на документацию

Добавьте необязательный JavaScript-переключатель и поведение в стиле флажков с помощью нашего плагина buttons.

Если вы преобразуете это из кнопок во входные данные, это работает так, как ожидалось. (Примечание: фрагменты стека не подходят для начальной загрузки)

Чтобы уточнить, группа кнопок — это дизайн, а не функциональность. На самом деле вам нужно использовать входные данные либо в качестве флажков, либо, что более вероятно, в качестве радиостанций.

 <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>