基于单选按钮选择的嵌套复选框。 HTML

Question

我想知道是否有人可以帮助我，我不确定从哪里开始，只学习 J Query 和剃刀页面。我有两个选项 1 和 2（单选按钮导致一次只能选择一个）。选择选项2时，人可以在选项2中选中任何复选框（例如列表0和/或列表1）。选择选项后，我希望能够提交表单（Post）。

代码：

<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

下面是一个demo，选择option1/List0/List1时，会提交表单，只有选择option2时，List0和List1才能被选中：

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

结果：