Question

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

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

我想使用从HERE

获得的bootstrap-switch

我只想拥有＆＃34; Switching＆＃34;影响我的单选按钮，而不是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>

现在的行为是这样的，如果我点击＆＃34; OFF＆＃34;选项，它滑动到＆＃34; ON＆＃34; ...但如果我点击＆＃34; ON＆＃34;选项它不会回到OFF。有趣的是，如果我点击单选按钮的文本是＆＃34;是＆＃34;，它然后切换。
任何帮助将不胜感激。

Answer 1

当您使用$("input:radio").bootstrapSwitch();时，它将起作用，您不必编写单独的代码来处理click事件。我试过Similar example。

 $('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中将$("input:radio").on("click".....设置为true，首先应检查$(this).attr("checked")是否为真，然后将其设置为true，否则将toggleState设置为false。

JQuery中的ASP.NET单选按钮切换

1 个答案: