为什么两个引导切换按钮造成的问题？

Question

我有两个引导切换按钮，但是当我点击其中之一，另一种是得到影响。能否请你告诉我什么是错在我的代码？

 <div class="row p-0 m-0">
              <!-- all day event toggle -->
                 <div class="col-md-3">
                    <label for="allDayEvent">All Day Event:</label><br>
                            <div class="btn-group btn-group-toggle" id="AllDayEventButton" data-toggle="buttons" disable="false">
                                <label class="btn btn-secondary" id="allDayEventYesLbl" >
                                <input type="radio" name="options" id="allDayEventYes" autocomplete="off">
                                Yes
                                </label>
                                <label class="btn btn-secondary active " id="allDayEventNoLbl" >
                                <input type="radio" name="options" id="allDayEventNo" autocomplete="off">
                                No
                                </label>
                            </div>
                </div>
            <!-- all day event toggle END -->

            <!-- Recurring event toggle -->
                <div class="col-md-3">
                <label for="recurringEvent">Recurring Event:</label><br>
                    <div class="btn-group btn-group-toggle" id="RecurringButton" data-toggle="buttons">
                        <label class="btn btn-secondary" id="recurringEventYesLbl">
                        <input type="radio" name="options" value="Y" id="recurringYes" autocomplete="off">
                        Yes
                        </label>
                        <label class="btn btn-secondary active" id="recurringEventNoLbl">
                        <input type="radio" name="options" value="N" id="recurringNo" autocomplete="off" checked>
                        No
                        </label>
                    </div>
                </div>
            <!-- recurring event toggle END -->
             </div>

Answer 1

有很简单的错误，你可能会忽视。无论在这两个单选按钮的输入具有相同的名称。在相同的单选按钮，输入应具有相同的名称，但在不同群体应该有不同的名称。只是改变了名称，第二组在将修复它。这里是一个固定的版本！

 <div class="row p-0 m-0">
              <!-- all day event toggle -->
                 <div class="col-md-3">
                    <label for="allDayEvent">All Day Event:</label><br>
                            <div class="btn-group btn-group-toggle" id="AllDayEventButton" data-toggle="buttons" disable="false">
                                <label class="btn btn-secondary" id="allDayEventYesLbl" >
                                <input type="radio" name="options" id="allDayEventYes" autocomplete="off">
                                Yes
                                </label>
                                <label class="btn btn-secondary active " id="allDayEventNoLbl" >
                                <input type="radio" name="options" id="allDayEventNo" autocomplete="off">
                                No
                                </label>
                            </div>
                </div>
            <!-- all day event toggle END -->

            <!-- Recurring event toggle -->
                <div class="col-md-3">
                <label for="recurringEvent">Recurring Event:</label><br>
                    <div class="btn-group btn-group-toggle" id="RecurringButton" data-toggle="buttons">
                        <label class="btn btn-secondary" id="recurringEventYesLbl">
                        <input type="radio" name="optionsTwo" value="Y" id="recurringYes" autocomplete="off">
                        Yes
                        </label>
                        <label class="btn btn-secondary active" id="recurringEventNoLbl">
                        <input type="radio" name="optionsTwo" value="N" id="recurringNo" autocomplete="off" checked>
                        No
                        </label>
                    </div>
                </div>
            <!-- recurring event toggle END -->
             </div>