How can I make a form inputs disabled by pressing a radio button?

Question

I have two radio buttons. If the first radio button "Main address" is checked, then the form below should be disabled. If I then check the second radio button "Other address", the form should be activated.

I also want the form to be disabled in primary state, if none of the radio buttons are checked (when redirected on the page, both radio buttons are unchecked).

How to solve this using JavaScript?

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

Answer 1

Add an eventlistener on your radiobutton and add if it's clicked to the address-DIV a new class 'hide'. Add CSS for hide, so it will not be visible.
For the second radiobutton do it the same just for remove instead of add this class. So you can show it again.

By the way do never use an id with a space inside it, it will not function. For the radios I changed it.

 let mainAdress= document.getElementById("Main_address"); mainAdress.addEventListener('click', function() { document.getElementById("address").classList.add('hide'); }); let otherAdress= document.getElementById("Other_address"); otherAdress.addEventListener('click', function() { document.getElementById("address").classList.remove('hide'); });

 .hide { visibility: hidden; }

 <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" id ='address'> <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>

Answer 2

Something like this should work:

radioButton.addEventListener('change', () => {
    radioButton.value === 'on' ? input.disabled = true : input.disabled = false;
})

Answer 3

You could also have the other address inputs disabled by default and add an event listener to change it once the other address radio button is pressed. In the event you don't want to hide it unless you need it.