禁用/启用文本框，单击单选按钮

disable/able textbox onclick radio button

本文关键字：单击 单选按钮 文本 启用 禁用      更新时间：2023-09-26

我很抱歉，但我尝试了互联网上所有可用的"解决方案"，但都不起作用。

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

请帮我解决这个问题。当我点击单选按钮时，文本框仍然是禁用的。

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>

删除输入文本只读属性

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>

EDIT 2

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

编辑

对不起忘了OP想要单选按钮，它工作得很好。这是一个简单的CSS解决方案。

这个用途:

  1. 相邻兄弟选择器
  2. pointer-events

片段1 

.chx:checked + input {
  pointer-events: none;
}
.chxs:checked ~ input {
  pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
  pointer-events: none;
}
<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>

2

片段

.w3-radio:checked ~ input:nth-of-type(2n-1) {
  pointer-events: none;
}
<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>

相关文章：