-1

我在 ASP.NET 中有一个单选按钮

 <asp:RadioButton ID="RadioButton2" Text="Yes" GroupName="rb" Checked="false" runat="server" />

我想使用从HERE获得的引导开关

我只想在我的单选按钮上有“切换”效果，而不是 ASP.NET 提供的默认圆圈。

这是我所做的：
1) 在我的 aspx 页面上添加了单选按钮。如上图所示。
2）使用以下脚本 

   <script type="text/javascript">

        $(document).ready(function () {

            $("input:radio").bootstrapSwitch();

          $("input:radio").on("click", function () {

                console.log("Clicked");
                $("input:radio").bootstrapSwitch('toggleState', true);
            });
        });


    </script>

现在的行为是这样的，如果我点击“OFF”选项，它会滑到“ON”......但是如果我点击“ON”选项它不会回到OFF。有趣的是，如果我单击“是”的单选按钮文本，它就会切换。
任何帮助都感激不尽。

4

1 回答 1

2

使用时$("input:radio").bootstrapSwitch();，它会起作用，您不必编写单独的代码来处理click事件。我试过一个类似的例子。

 $('input[type="radio"]').bootstrapSwitch();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://www.bootstrap-switch.org/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">


<script src="http://www.bootstrap-switch.org/docs/js/bootstrap.min.js"></script>
<script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
<div class="col-sm-6">
  <h3 class="h5">Example</h3>
  <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
  <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
  <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
</div>

如果你查看你的代码，你总是设置toggleState为 true in $("input:radio").on("click".....，你应该首先检查是否$(this).attr("checked")为 true，然后将其设置为 true，否则设置toggleState为 false。

于 2014-11-09T17:21:04.537 回答