启用和禁用单选按钮选择上的文本框

Question

选择IP和其他单选按钮时，我想启用文本框。我想禁用其他单选按钮选择。

对IP来说效果很好，但我不能让它对其他人起作用。任何人

function EnableDisableTextBoxNext() {
var chkYes = document.getElementById("chkYes");
var addMoreDetailsNext = document.getElementById("addmoreDetailsOnSelection");
addMoreDetailsNext.disabled = chkYes.checked ? false : true;
if (!addMoreDetailsNext.disabled) {
addMoreDetailsNext.focus();
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<label class="radio-inline"><input type="radio" name="org_rec" id="chkNo" value="FMOH"> FMOH</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chkNo" value="CDC"> CDC </label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chkYes" onclick="EnableDisableTextBoxNext()" value="IP"> IP</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chkYes" onclick="EnableDisableTextBoxNext()" value="Other"> Other</label><br>

<br><br>
<textarea class="form-control" id="addmoreDetailsOnSelection" name="org_rec_comment" disabled="disabled" required placeholder="Only for IP and Other" rows="5" id="comment"></textarea>

Answer 1

这是您想要的工作方式，而且是可扩展的；我将单选按钮的值作为参数传递到函数中。

function EnableDisableTextBoxNext(opt) {
if (opt=="IP" || opt=="Other" ){
document.getElementById("addmoreDetailsOnSelection").disabled = false;
}
else{
document.getElementById("addmoreDetailsOnSelection").disabled = true;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<label class="radio-inline"><input type="radio" name="org_rec" id="chk1" onchange="EnableDisableTextBoxNext('FMOH')"> FMOH</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chk2" onchange="EnableDisableTextBoxNext('CDC')"> CDC </label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chk3" onchange="EnableDisableTextBoxNext('IP')"> IP</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" id="chk4" onchange="EnableDisableTextBoxNext('Other')"> Other</label><br>

<br><br>
<textarea class="form-control" id="addmoreDetailsOnSelection" name="org_rec_comment" disabled="disabled" required placeholder="Only for IP and Other" rows="5"></textarea>

Answer 2

警告Id属性应该始终是唯一的。所以你可以使用这个代码(我给每个单选按钮添加onclick调用(：

为了避免声明所有单选按钮，我也修改了JS部分和HTML部分(更改值attribut并删除id attribut(：

function EnableDisableTextBoxNext() {
const rbs = document.querySelectorAll('input[name="org_rec"]');
var addMoreDetailsNext = document.getElementById("addmoreDetailsOnSelection");
for (const rb of rbs) {
if (rb.checked && rb.value == "yes") {
addMoreDetailsNext.disabled = false
break
} else {
addMoreDetailsNext.disabled = true
}
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="no"> FMOH</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="no"> CDC </label><br>
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="yes"> IP</label><br>
<label class="radio-inline"><input type="radio" name="org_rec" onclick="EnableDisableTextBoxNext()" value="yes"> Other</label><br>

<br><br>
<textarea class="form-control" id="addmoreDetailsOnSelection" name="org_rec_comment" disabled="disabled" required placeholder="Only for IP and Other" rows="5" id="comment"></textarea>