如何在Bootstrap 4下点击相应的单选按钮后启用文本输入？

Question

我正在使用 Bootstrap 4 并在我的网络应用程序中设计一个模拟项目提交表单。在交易行中，价格的文本输入是默认禁用的。点击'sell'按钮后启用文本输入怎么办？

<div class="form-inline">
   <div class="form-group">
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="free" name="customRadioInline1" class="custom-control-input" checked>
            <label class="custom-control-label" for="free">Free</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="sell" name="customRadioInline1" class="custom-control-input">
            <label class="custom-control-label" for="sell">Sell</label>
      </div>
   </div>
   <label for="price">Price</label>
   <input type="text" class="form-control" id="price" placeholder="HKD" disabled>
</div>

我希望在编写JS时'sell'单选按钮上会有一些代码包括'onclick'和'add.eventListener'，但我不知道如何编码以便启用选择卖出按钮后输入价格，并在默认情况下保持禁用状态（即免费）。

或者，Bootstrap 4 有什么简单的方法吗？

感谢您的帮助。

Answer 1

在 javascript 中，您可以在对按钮

调用 onclick 的函数中使用 document.getElementById("sell").setAttribute("disabled", false);

Answer 2

您可以先将所有带有Document.querySelectorAll(). Then loop through them with forEach()的收音机定位到附加事件（点击）。在事件处理程序函数中，您可以检查单击的单选按钮的 id，您可以根据它 set/remove 属性 (disabled)。

尝试以下方式：

var radios = document.querySelectorAll('[name=customRadioInline1]');
Array.from(radios).forEach(function(r){
  r.addEventListener('click', function(){
    var priceEl = document.getElementById('price');
    if(this.id == 'sell')
      priceEl.removeAttribute('disabled');
    else
      priceEl.setAttribute('disabled', 'disabled');
  });
});

<div class="form-inline">
   <div class="form-group">
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="free" name="customRadioInline1" class="custom-control-input" checked>
            <label class="custom-control-label" for="free">Free</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="sell" name="customRadioInline1" class="custom-control-input">
            <label class="custom-control-label" for="sell">Sell</label>
      </div>
   </div>
   <label for="price">Price</label>
   <input type="text" class="form-control" id="price" placeholder="HKD" disabled>
</div>

如何在Bootstrap 4下点击相应的单选按钮后启用文本输入？

How to enable text input after clicking a corresponding radio button under Bootstrap 4?

html

javascript

disabled-input

bootstrap-4