My goal is to have two radio buttons functioning in a way that when the first radio button "Main address" is checked, the form below should be disabled. However, if I check the second radio button "Other address", the form should become activated.
In addition, I want the form to start off being disabled by default if neither of the radio buttons are checked (when initially arriving on the page, both radio buttons are unchecked).
I am looking for a solution to implement this functionality using JavaScript.
https://i.sstatic.net/KBDsi.png
<form class="needs-validation" novalidate>
<!--was-validated -->
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="Main address" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="Main address">Main address</label>
</div>
<div class="custom-control custom-radio">
<input id="Other address" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="Other address">Other address</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Address</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Please enter your other address.</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-expiration">City</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv">Postcode</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" href="index.php" type="submit">Continue to checkout</button>
</form>