在單選按鈕選擇上啟用和禁用文本框

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。

 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 部分（更改值屬性並刪除 id 屬性）：

 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>