带有自定义文本字段的引导单选按钮 - 无法在文本字段中输入答案

【问题标题】：bootstrap radio buttons with custom text-field - unable to type inside text-field带有自定义文本字段的引导单选按钮 - 无法在文本字段中输入
【发布时间】：2019-03-25 03:30:58
【问题描述】：

我正在尝试向一组单选按钮添加自定义文本输入。我希望用户能够在文本字段中编写自定义文本。虽然文本字段显示正确，但我无法在文本字段内输入。关于如何解决这个问题的任何想法？

我正在使用引导程序，这是我的代码：

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

我的小提琴： http://jsfiddle.net/nLxgdhaf/

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

问题是选择输入会触发引导程序的radio 按钮选择，它会覆盖您的textbox 选择。一个快速的 hacky 解决方案是通过 e.preventDefault() 和 e.stopPropogation() 禁用引导功能，关注文本框，然后通过 js 选择单选按钮。这是一个工作示例：

document.querySelector('input[name="other"]').addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();

/* console.log(this.previousElementSibling.checked) */

this.previousElementSibling.checked = true

document.querySelectorAll('label').forEach(function (el) {
	el.classList.remove('active')
	el.classList.remove('focus')
})

this.parentElement.classList.add('active')
})

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

【讨论】：