提问人：ronzenith 提问时间：10/29/2019 最后编辑：ronzenith 更新时间：10/29/2019 访问量：1484
单击Bootstrap 4下的相应单选按钮后如何启用文本输入？
How to enable text input after clicking a corresponding radio button under Bootstrap 4?
问：
我正在使用 Bootstrap 4 并在我的 Web 应用程序中设计一个模拟项目提交表单。在发生业务行中，价格的文本输入默认禁用。如果我在点击“出售”按钮后启用文本输入，我该怎么办？
<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 有什么简单的方法吗？
谢谢你的帮助。
答：
0赞
Maudiy
10/29/2019
#1
在 javascript 中，您可以在按钮上调用 onclick 的函数中使用document.getElementById("sell").setAttribute("disabled", false);
评论
0赞
ronzenith
10/29/2019
<label for=“price”>Price</label> <input type=“text” class=“form-control” id=“price” placeholder=“HKD” disabled> 我使用“price”部分更新我的代码。对不起我的错过。
1赞
Mamun
10/29/2019
#2
您可以首先使用 Document.querySelectorAll（） 定位所有无线电。然后使用 forEach（） 遍历它们以附加事件（单击）。在事件处理函数中，您可以检查单击的单选按钮的 ID，您可以根据该 ID 设置/删除属性 （）。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>评论
1赞
ronzenith
10/29/2019
谢谢！它有效!!!!!顺便说一句，想知道这个关键词指的是什么。是可变收音机吗？我总是对“这个”感到困惑......
1赞
Mamun
10/30/2019
@ronzenith，我们非常欢迎您。 指向发生事件（单击）的元素。在上面的示例中，如果单击第一个单选按钮指向第一个单选按钮，如果单击第二个单选按钮指向第二个单选按钮：）thisthisthis
评论
[...document.querySelectorAll('.custom-control-label')].forEach( e => e.addEventListener('click', function(){ your_Input_Id.focus(); }) );?