CODEWITHSUNDEEP
javascriptjqueryhtml
phloxangrex
phloxangrex

Reputation: 15

disable/able textbox onclick radio button

im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.

if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.

pls help me with this.when i click the radio button, the textbox is still disabled.

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>

Upvotes: 0

Views: 106

Answers (2)

zer00ne
zer00ne

Reputation: 44086

EDIT 2

In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.

EDIT

Sorry forgot OP wants radio buttons, it works just as well. Here's a simple CSS only solution.

This uses:

  1. adjacent sibling selector
  2. pointer-events

SNIPPET 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>

SNIPPET 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>

Upvotes: 0

Mahi
Mahi

Reputation: 1727

remove input text readonly attribute 

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>

Upvotes: 1

Related Questions