If Checkbox Checked Then disable Input Fields

Question

I am trying to disable input fields in a form based on user input with javascript. The fields DD Number, Bank, date and branch need to be enabled only IF the checkbox id "DD" is checked. I tried like this but its not working.

<script type="text/javascript">
    function paycheck()
    {
    var pay=document.getElementById("DD");
    var bank=document.getElementById("bank");
    var ddno=document.getElementById("ddno");
    var date=document.getElementById("date");
    var branch=document.getElementById("branch");
    ddno.disabled = true;
    bank.disabled = true;
    date.disabled = true;
    branch.disabled = true;
    if(DD.checked)//If Checked Disable
    {
    ddno.enabled = true;
    bank.enabled = true;
    date.enabled = true;
    branch.enabled = true;
    }
    }
    </script>

    <form name="f1" onsubmit="f1()">
    <b>Payment Details:</b> DD<input type="radio" name="pay" value="DD" id="DD"> Cash<input type="radio" name="pay" value="Cash" id="Cash">
    <br>
    <b>DD No:</b>
    <input type="text" name="ddno" id="ddno">
    <br>
    <b>Date:</b>
    <input type="date" name="date">
    <br>
    <b>Bank:</b>
    <input type="text" name="bank" id="bank">
    <br>
    <b>Branch:</b>
    <input type="text" name="branch" id="branch">
    <br>
    <b>Amount:</b>
    <input type="number" name="amount" id="amount">
    <br>
    <input type="submit" value="Submit">
    </form>

Answer 1

I do not see paycheck getting called anywhere. It would need to be called on every click of either of the radio buttons. Also, there is no enabled property on an input object. This is what you want.

var pay = document.getElementById("DD");
var cash = document.getElementById("Cash");
var bank = document.getElementById("bank");
var ddno = document.getElementById("ddno");
var date = document.getElementById("date");
var branch = document.getElementById("branch");

pay.onclick = cash.onclick = paycheck;

function paycheck() {
  ddno.disabled = bank.disabled = date.disabled = branch.disabled = cash.checked;
};

<form name="f1" onsubmit="f1()">
  <b>Payment Details:</b> DD
  <input type="radio" name="pay" value="DD" id="DD" checked="checked">Cash
  <input type="radio" name="pay" value="Cash" id="Cash">
  <br>
  <b>DD No:</b>
  <input type="text" name="ddno" id="ddno">
  <br>
  <b>Date:</b>
  <input type="date" name="date" id="date">
  <br>
  <b>Bank:</b>
  <input type="text" name="bank" id="bank">
  <br>
  <b>Branch:</b>
  <input type="text" name="branch" id="branch">
  <br>
  <b>Amount:</b>
  <input type="number" name="amount" id="amount">
  <br>
  <input type="submit" value="Submit">
</form>

Answer 2

try this and remember to call Paycheck function on two check box with [onClick="paycheck();"];

    function paycheck() {
  var pay1=document.getElementById("DD");
  var pay2=document.getElementById("Cash");
  var bank=document.getElementById("bank");
  var ddno=document.getElementById("ddno");
  var date=document.getElementById("date");
  var branch=document.getElementById("branch");
  if(pay1.checked) { //If Checked Disable
   console.log("DD")
   ddno.disabled = false;
   bank.disabled = false;
   date.disabled = false;
   branch.disabled = false;
  }
  
  if(pay2.checked) { //If Checked Disable
   console.log("Cash")
   ddno.disabled = true;
   bank.disabled = true;
   date.disabled = true;
   branch.disabled = true; 
  }
    }

<form name="f1" onsubmit="f1()">
    <b>Payment Details:</b> DD<input type="radio" name="pay" value="DD" id="DD" onClick="paycheck();"> Cash<input type="radio" name="pay" value="Cash" id="Cash" onClick="paycheck();">
    <br>
    <b>DD No:</b>
    <input type="text" name="ddno" id="ddno">
    <br>
    <b>Date:</b>
    <input type="date" name="date" id="date">
    <br>
    <b>Bank:</b>
    <input type="text" name="bank" id="bank">
    <br>
    <b>Branch:</b>
    <input type="text" name="branch" id="branch">
    <br>
    <b>Amount:</b>
    <input type="number" name="amount" id="amount">
    <br>
    <input type="submit" value="Submit">
</form>

Answer 3

Problem is you have used un-declared funcation f1() on form submit and variable DD, possibly you need to use function paycheck() and variable pay. Again the field date was missing id attribute. Also you can reduce your code to this:

ddno.disabled = bank.disabled = date.disabled = branch.disabled = !pay.checked;

Below code is using form submit event:

function paycheck() {
  var pay = document.getElementById("DD");
  var bank = document.getElementById("bank");
  var ddno = document.getElementById("ddno");
  var date = document.getElementById("date");
  var branch = document.getElementById("branch");
  ddno.disabled = bank.disabled = date.disabled = branch.disabled = !pay.checked;
}

<form name="f1" onsubmit="paycheck();">
  <b>Payment Details:</b> DD
  <input type="radio" name="pay" value="DD" id="DD">Cash
  <input type="radio" name="pay" value="Cash" id="Cash">
  <br>
  <b>DD No:</b>
  <input type="text" name="ddno" id="ddno">
  <br>
  <b>Date:</b>
  <!-- added id -->
  <input type="date" name="date" id="date">
  <br>
  <b>Bank:</b>
  <input type="text" name="bank" id="bank">
  <br>
  <b>Branch:</b>
  <input type="text" name="branch" id="branch">
  <br>
  <b>Amount:</b>
  <input type="number" name="amount" id="amount">
  <br>
  <input type="submit" value="Submit">
</form>

Below code is using radio change event:

function paycheck(val) {
  var bank = document.getElementById("bank");
  var ddno = document.getElementById("ddno");
  var date = document.getElementById("date");
  var branch = document.getElementById("branch");
  ddno.disabled = bank.disabled = date.disabled = branch.disabled = "DD" !== val;
}

<form name="f1">
  <b>Payment Details:</b> DD
  <input type="radio" name="pay" value="DD" id="DD" onchange="paycheck(this.value);" checked=''>Cash
  <input type="radio" name="pay" value="Cash" id="Cash" onchange="paycheck(this.value);">
  <br>
  <b>DD No:</b>
  <input type="text" name="ddno" id="ddno">
  <br>
  <b>Date:</b>
  <!-- added id -->
  <input type="date" name="date" id="date">
  <br>
  <b>Bank:</b>
  <input type="text" name="bank" id="bank">
  <br>
  <b>Branch:</b>
  <input type="text" name="branch" id="branch">
  <br>
  <b>Amount:</b>
  <input type="number" name="amount" id="amount">
  <br>
  <input type="submit" value="Submit">
</form>