禁用/有能力的文本框onclick单选按钮

Question

我很抱歉，但我尝试了互联网上提供的所有内容，但所有＆＃34;解决方案＆＃34;不起作用。

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

请帮助我。当我点击单选按钮时，文本框仍然被禁用。

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>

Answer 2

编辑2

在Snippet 2中，它与OP的布局完全相同。通过添加nth-of-type，右侧的输入是唯一启用和禁用的输入，而左侧的输入不受影响。属性disabled已被删除。

修改

抱歉忘了OP想要单选按钮，它的效果也一样。 这是一个简单的CSS解决方案。

这使用：

1. adjacent sibling selector
2. pointer-events

SNIPPET 1

＆＃13;
＆＃13;
.chx:checked + input {
  pointer-events: none;
}
.chxs:checked ~ input {
  pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
  pointer-events: none;
}
＆＃13;
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
  <input name='rad' type='radio'>
  <input type='text'>
</fieldset>
<fieldset>
  <input name='rad' type='radio'>
  <input type='text'>
</fieldset>
＆＃13;
＆＃13;
＆＃13;

SNIPPET 2

＆＃13;
＆＃13;
.w3-radio:checked ~ input:nth-of-type(2n-1) {
  pointer-events: none;
}
＆＃13;
<div class="trbl-padding-5">

  <input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">

  <label class="w3-validate">Minimum Payment</label>

  <br>

  <input type="text" class="tlabel" readonly=true value="Amount">

  <input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">

  <br>

  <input type="text" class="tlabel" readonly=true value="Starting Date">

  <input type="date" id="first" name="sdate">

  <br>

</div>

<div class="trbl-padding-5">

  <input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">

  <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>
＆＃13;
＆＃13;
＆＃13;