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>

为什么两个引导程序切换按钮引起问题？

1 个答案: