jquery - Asp.net 复选框切换选项仅选择 1

Question

我一分钟有 3 个切换选项，我想一次只选择 1 个选项。

我已经累了一些功能来尝试并实现只有1个被选中。

我仍然可以单击所有 3 个。

正在使用的功能。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $('input.chkClass').on('change', function () {
        $('input.chkClass').not(this).prop('checked', false);
    });
</script>

切换选项。

<div id="Div7" visible="false" runat="server">
                <div class="col-md-10 input-group input-group-lg" style="margin-left: auto; margin-right: auto;">
                    <asp:Label ID="Label4" runat="server" Text="I know how much I spend on Electric"></asp:Label>
                    <br />
                    <input type="checkbox" data-toggle="toggle" data-style="slow" data-on="Yes" data-off="No" id="Elec_Spend_Toggle" runat="server" class="chkClass" />
                </div>
                <br />
                <div class="col-md-10 input-group input-group-lg" style="margin-left: auto; margin-right: auto;">
                    <asp:Label ID="Label5" runat="server" Text="I know how much Electric I use"></asp:Label>
                    <br />
                    <input type="checkbox" data-toggle="toggle" data-style="slow" data-on="Yes" data-off="No" id="Elec_Usage_Toggle" runat="server" class="chkClass" />
                </div>
                <br />
                <div class="col-md-10 input-group input-group-lg" style="margin-left: auto; margin-right: auto;">
                    <asp:Label ID="Label16" runat="server" Text="I DONT know how much Electric I use"></asp:Label>
                    <br />
                    <input type="checkbox" data-toggle="toggle" data-style="slow" data-on="Yes" data-off="No" id="Elec_DONT_Toggle" runat="server" class="chkClass" />
                </div>
                <br />
                <div class="col-md-10 input-group input-group-lg" style="margin-left: auto; margin-right: auto;">
                    <asp:Button ID="Continue_5_btn" runat="server" Text="Continue" class="btn btn-primary" Width="150" OnClick="Continue_btn_Click_5" />
                </div>
            </div>

我希望将所有这 3 个链接起来，因此如果我选择一个，则如果选择了“是”，则其他两个切换会恢复为“否”。

标签： jqueryasp.netinputtoggle