Step 1: The HTML
In this instance, we're going to create the input fields,checkboxes and everything needed for the layout.
Create a html document of any name; I called mine "scripts.html".
Step 2: The OutputCreate a html document of any name; I called mine "scripts.html".
<!DOCTYPE html>
<html>
<head>
<title>Simple Check boxes</title>
<script type="text/javascript" src="./auth.js"></script>
<link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
</head>
<body>
<form role="form" name="payment">
<div class="checkbox">
<p>Payment Option</p>
<label class="checkbox-inline">
<input type="checkbox" value="cash" checked>Cash
</label>
<label class="checkbox-inline">
<input type="checkbox" value="mobile" name="mobilecheckstat" onchange="enableIn()"> Mobile Payment
</label>
<label class="checkbox-inline">
<input type="checkbox" value="credit" name="credcheckstat" onchange="enableIn()"> Credit Card
</label>
<label class="checkbox-inline">
<input type="checkbox" value="club" name="clubstat" onchange="enableIn()"> Club Card
</label>
</div>
<div class="form-group input-group">
<span class="input-group-addon">Credit Card Number</span>
<input type="number" class="form-control" name="cred" autocomplete="off" required="required" placeholder="Enter Credit Card Number">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Club Card Number</span>
<input type="number" class="form-control" name="club" autocomplete="off" required="required" placeholder="Enter Club Card Number">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Mobile Pay Transaction ID</span>
<input type="number" class="form-control" name="mobile" autocomplete="off" required="required" placeholder="Enter Mobile Pay Transaction ID (eg XX123..)">
</div>
<div class="form-group input-group">
<span class="input-group-addon">Amount</span>
<input type="number" class="form-control" autocomplete="off" required="required" placeholder="Amount To be Paid">
</div>
</form>
<script src="./bootstrap.min.js"></script>
</body>
</html>
 |
| The Expected output from the above code |
Step 3: The Javascript
Create a Javascript file of any name; I called mine "auth.js".
function start() {
payment.cred.disabled = true;
payment.club.disabled = true;
payment.mobile.disabled = true;
}
onload = start;
function enableIn() {
payment.cred.disabled = !payment.credcheckstat.checked;
payment.club.disabled = !payment.clubstat.checked;
payment.mobile.disabled = !payment.mobilecheckstat.checked;
}
And that's it.
PS. I included some bootstrap within the code-it's completely optional.
