Html 具有自定义文本字段的引导单选按钮-无法在文本字段内键入

我正在尝试向一组单选按钮添加自定义文本输入。我希望用户能够在文本字段中编写自定义文本。虽然文本字段显示正确，但我无法在文本字段内键入。你知道怎么解决这个问题吗

我正在使用引导，以下是我的代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
    <label class="btn btn-secondary">
    <input type="radio" name="options" id="option4" autocomplete="off"> Other <input type="text" name="other"> 
  </label>

</div>

活跃的
无线电
无线电
其他

我的小提琴：

---

问题在于，选择输入会触发引导的

单选按钮选择，这会覆盖您的
文本框
选择。一个快速的黑客解决方案是通过
e.preventDefault（）
和
e.stopPropogation（）
禁用引导功能，关注文本框，然后通过js选择单选按钮。下面是一个工作示例：


document.querySelector（'input[name=“other”]”）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
/*console.log（this.previousElementSibling.checked）*/
this.previousElementSibling.checked=true
document.querySelectorAll（'label'）.forEach（函数（el）{
el.classList.remove（'active'）
el.classList.remove（'focus'）
})
this.parentElement.classList.add（'active'）
})

活跃的
无线电
无线电
其他
问题在于，选择输入会触发引导的
单选按钮选择，这会覆盖您的
文本框
选择。一个快速的黑客解决方案是通过
e.preventDefault（）
和
e.stopPropogation（）
禁用引导功能，关注文本框，然后通过js选择单选按钮。下面是一个工作示例：


document.querySelector（'input[name=“other”]”）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
/*console.log（this.previousElementSibling.checked）*/
this.previousElementSibling.checked=true
document.querySelectorAll（'label'）.forEach（函数（el）{
el.classList.remove（'active'）
el.classList.remove（'focus'）
})
this.parentElement.classList.add（'active'）
})

活跃的
无线电
无线电
其他