Nested Checkboxes based on a choice from a radio button. Html

Question

I am wondering if anyone can help me, I am not sure where to start and only learning J Query and razor pages. I have two options 1 and 2 (radio buttons cause only one can be selected at a time). When option 2 is selected the person can check any of the checkbox within option 2 (such as List 0 and/or List 1). After the options are selected I would like to be able to submit the form (Post).

Code:

<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />


<div class="container d-flex align-items-center justify-content-center mt-lg-4">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="card shadow">

            <div class="card-body">

                <h5 class="card-title text-center mx-2"></h5>

                <form method="post" asp-page="Unsubscribe">

                    <fieldset class="row mb-3 ms-2">
                        <legend class="col-form-label col-sm-2 pt-0">Options</legend>
                        <div class="mb-5 ms-5">

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gridRadios" id="gridOption1" value="option1" checked>
                                <label class="form-check-label" for="gridOption1">
                                    Option 1
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gridRadios" id="gridOption2" value="option2">
                                <label class="form-check-label" for="gridOption2">
                                    Option 2
                                </label>
                                
                                <div class="ms-5">
                                    <input name="checkbox" id="checkbox_0" type="checkbox" class="form-check-input" value="0">
                                    <label for="checkbox_1" class="form-check-label">List0</label>
                                </div>

                                <div class="ms-5">
                                    <input name="checkbox" id="checkbox_1" type="checkbox" class="form-check-input" value="2">
                                    <label for="checkbox_1" class="form-check-label">List1</label>
                                </div>

                            </div>
                        </div>
                    </fieldset>


                    <div class="mb-5 text-center align-content-center">
                        <button type="submit" class="btn btn-success">Unsubscribe</button>
                    </div>

                </form>
            </div>
        </div>

    </div>

</div>


<script src="~/lib/jquery/dist/jquery.js"></script>

Answer 1

Here is a demo about when option1/List0/List1 is selected,the form will be submitted,and only when option2 is selected,List0 and List1 can be selected:

<div class="container d-flex align-items-center justify-content-center mt-lg-4">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="card shadow">

            <div class="card-body">

                <h5 class="card-title text-center mx-2"></h5>

                <form method="post" asp-page="Unsubscribe" id="myForm">

                    <fieldset class="row mb-3 ms-2">
                        <legend class="col-form-label col-sm-2 pt-0">Options</legend>
                        <div class="mb-5 ms-5">

                            <div class="form-check">
                                <input class="form-check-input submitForm" type="radio" name="gridRadios" id="gridOption1" value="option1" checked>
                                <label class="form-check-label" for="gridOption1">
                                    Option 1
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="gridRadios" id="gridOption2" value="option2">
                                <label class="form-check-label" for="gridOption2">
                                    Option 2
                                </label>

                                <div class="ms-5">
                                    <input name="checkbox" id="checkbox_0" type="checkbox" class="form-check-input submitForm" value="0">
                                    <label for="checkbox_1" class="form-check-label">List0</label>
                                </div>

                                <div class="ms-5">
                                    <input name="checkbox" id="checkbox_1" type="checkbox" class="form-check-input submitForm" value="2">
                                    <label for="checkbox_1" class="form-check-label">List1</label>
                                </div>

                            </div>
                        </div>
                    </fieldset>


                    <div class="mb-5 text-center align-content-center">
                        <button type="submit" class="btn btn-success">Unsubscribe</button>
                    </div>

                </form>
            </div>
        </div>

    </div>

</div>

js:

<script>
        $(function() {
            IsChecked();
        })
        $("input[type='radio']").change(function() {
            IsChecked();
        })
        function IsChecked() {
            if ($("#gridOption2").prop('checked')) {
                $("#checkbox_0").removeAttr("disabled");
                $("#checkbox_1").removeAttr("disabled");

            } else {
                $("#checkbox_0").attr("disabled", "disabled");
                $("#checkbox_1").attr("disabled", "disabled");


            }
        }
        $('input.submitForm').change(function(t) {
            if ($(t)[0].target.checked) {
                $("#myForm").submit();
            }
        });
    </script>

result: