javascript - 禁用/启用文本框 onclick 单选按钮

Question

很抱歉，我尝试了互联网上提供的所有方法，但所有“解决方案”都不起作用。

如果单击单选按钮，则将启用该单选按钮下的文本框。否则将禁用。

请帮我解决这个问题。当我单击单选按钮时，文本框仍然处于禁用状态。

js

function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
    document.getElementById("mMininum-amount").disabled = false;
    document.getElementById("first").disabled = false;
    document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
    document.getElementById("numMonth-months").disabled = false;
    document.getElementById("mMininum-amount").disabled = true;
    document.getElementById("first").disabled = true;
}
}

html

<div class="trbl-padding-5">
    <input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">    <label class="w3-validate">Minimum Payment</label><br>
    <input type="text" class="tlabel" readonly="true" value="Amount">   <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
    <input type="text" class="tlabel" readonly="true" value="Starting Date">    <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
    <input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">    <label class="w3-validate">Number of Months</label><br>
    <input type="text" class="tlabel" readonly="true" value="Months">       <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>

Answer 1

删除输入文本只读属性

function radioModeOfPayment(x) {
  if (document.getElementById('mMininum').checked == true) {
    document.getElementById("mMininum-amount").disabled = false;
    document.getElementById("first").disabled = false;
    document.getElementById("numMonth-months").disabled = true;
  }
  if (document.getElementById('numMonth').checked == true) {
    document.getElementById("numMonth-months").disabled = false;
    document.getElementById("mMininum-amount").disabled = true;
    document.getElementById("first").disabled = true;
  }
}

<div class="trbl-padding-5">
  <input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
  <label class="w3-validate">Minimum Payment</label>
  <br>
  <input type="text" class="tlabel" readonly="true" value="Amount">
  <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
  <br>
  <input type="text" class="tlabel" readonly="true" value="Starting Date">
  <input type="date" disabled="disabled" id="first" name="sdate">
  <br>
</div>
<div class="trbl-padding-5">
  <input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
  <label class="w3-validate">Number of Months</label>
  <br>
  <input type="text" class="tlabel" readonly="true" value="Months">
  <input type="text" class="tlabel w3-border"  id="numMonth-months" name="numMonth-months" value="">
  <br>
</div>