表单：如果选择单选按钮，则启用 textarea答案

【问题标题】：Form: enable textarea if radio button is selected表单：如果选择单选按钮，则启用 textarea
【发布时间】：2016-03-22 15:09:24
【问题描述】：

在选择“其他地址”的单选按钮时，用户如何在Textarea中输入其他地址，如以下4个选项：

<br><input type="radio" name="br_address" value="Address 1" checked> Address 1
<br><input type="radio" name="br_address" value="Address 2">  Address 2
<br><input type="radio" name="br_address" value="Address 3">  Address 3
<br><input type="radio" name="br_address" value=""> Others Address
<br><textarea name="br_address" rows="3" cols="40" disabled></textarea>

首先非常感谢您的帮助和支持！

【问题讨论】：

标签： forms textarea radio

【解决方案1】：

当另一个地址字段被选中时，您可以使用一些 javascript 来切换文本区域。像这样的东西会起作用：

HTML

<br><label><input type="radio" name="br_address" value="Address 1" checked> Address 1</label>
<br><label><input type="radio" name="br_address" value="Address 2">  Address 2</label>
<br><label><input type="radio" name="br_address" value="Address 3">  Address 3</label>
<br><label><input type="radio" name="br_address" value="" id="addressOther"> Others Address</label>
<br><textarea name="br_address" rows="3" cols="40" disabled id="addressField"></textarea>

JavaScript

var addressOther = document.querySelectorAll('input[name="br_address"]');
var addressField = document.getElementById('addressField');
var tempAddress = "";

for(var i = 0; i < addressOther.length; i++) {
    addressOther[i].addEventListener("change", addressHandler);
}


function addressHandler() {
    if(this.id == "addressOther") {
    addressField.disabled = false;
    addressField.value = tempAddress;
  } else {
    tempAddress = addressField.value;
    addressField.value = "";
    addressField.disabled = true;
  }
}

你可以在这个 JS Fiddle 中看到它的工作原理：https://jsfiddle.net/pkqm6f52/

希望有帮助！

【讨论】：