Bootstrap 动态附加的按钮组未正确取消选择

Question

当我有 Bootstrap 5 button group 时，代码如下所示：

<div class="btn-group d-flex justify-content-between m-4">
  <input id="a" type="radio" class="btn-check" name="btnradio" autocomplete="off">
  <label class="btn btn-outline-primary" for="a">Option A</label>
  <input id="b" type="radio" class="btn-check" name="btnradio" autocomplete="off">
  <label class="btn btn-outline-primary" for="b">Option B</label>
  <input id="c" type="radio" class="btn-check" name="btnradio" autocomplete="off">
  <label class="btn btn-outline-primary" for="c">Option C</label>
</div>

如果该组在页面加载期间位于页面上，则此方法可以正常工作。但是，如果我在页面加载后动态附加元素，单击后按钮将保持“活动”状态并且不会正确切换。

let options = ["D", "E", "F"];

let group = document.createElement('div');
group.className = 'btn-group d-flex justify-content-between m-4';
for (let type of options) {
  let button = document.createElement('input');
  button.id = type;
  button.name = type;
  button.type = 'radio';
  button.className = 'btn-check';
  button.autocomplete = 'off';
  group.append(button);
  let label = document.createElement('label');
  label.htmlFor = type;
  label.className = 'btn btn-outline-primary';
  label.innerHTML = 'Option ' + type;
  group.append(label);
}
document.body.append(group);

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h1 class="m-4">On Pageload</h1>
  <div class="btn-group d-flex justify-content-between m-4">
    <input id="a" type="radio" class="btn-check" name="btnradio" autocomplete="off">
    <label class="btn btn-outline-primary" for="a">Option A</label>
    <input id="b" type="radio" class="btn-check" name="btnradio" autocomplete="off">
    <label class="btn btn-outline-primary" for="b">Option B</label>
    <input id="c" type="radio" class="btn-check" name="btnradio" autocomplete="off">
    <label class="btn btn-outline-primary" for="c">Option C</label>
  </div>
  <h1 class="m-4">Dynamically Appended</h1>
</body>
</html>

知道为什么会这样吗？

Answer 1

您需要动态添加的按钮共享名称属性。

如果您在 onload 组中注意到它们都具有相同的名称属性：name="btnradio"

而在您动态添加的组中，它们都有不同的名称属性：button.name = type;

由于它们都有不同的名称，它们被视为不同的按钮组，因此选择另一个不会取消选择其他按钮组。

Bootstrap 动态附加的按钮组未正确取消选择

Bootstrap Dynamically Appended Button Group Not De-Selecting Properly

html

javascript

css

twitter-bootstrap

bootstrap-5