0

我正在尝试使用 Bootstrap Switch ( http://bootstrapswitch.com/ ) 和带有 Ruby on Rails 的 Bootstrap Switch gem访问已制成开关的复选框的状态。有了这个，我的目标是显示/隐藏某些 div。

我让它适用于标准单选按钮，但对于已更改为开关的复选框，我无法解决。任何帮助都会非常感谢。

为我的表单使用简单表单 gem：

    <%= f.input :legal_protection, label: "Add Legal Protection", input_html: { name: 'my-checkbox' }, checked: false %>

JS：

// Show/hide Legal Protection Details on checkbox change
jQuery(document).ready(function() {
  jQuery('[name="my-checkbox"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
  jQuery('.initial_quote').hide();
  jQuery('.legal1').show();
  jQuery('#legal2').show();
} else {
  jQuery('.initial_quote').show();
  jQuery('.legal1').hide();
  jQuery('#legal2').hide();
}
});
});

// Show/hide Legal Protection Details on page load
$(document).ready(function() {
var $legal_pro = $('input:checkbox[id=user_legal_protection]');
if($legal_pro.is(':checked') === false) {
  jQuery('#legal2').hide()
  jQuery('.initial_quote').show()
  jQuery('.legal1').hide()
}
});

相关的 HTML 输出：

<div class="form-group boolean optional user_legal_protection">
    <div class="checkbox">
         <input value="0" name="my-checkbox" type="hidden">
              <label class="boolean optional" for="user_legal_protection">
                   <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-id-user_legal_protection bootstrap-switch-animate bootstrap-switch-off" style="width: 106px;">
                        <div class="bootstrap-switch-container" style="width: 156px; margin-left: -52px;">
                           <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 52px;">ON</span>
<span class="bootstrap-switch-label" style="width: 52px;">&nbsp;</span>
                          <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 52px;">OFF</span>
                            <input name="my-checkbox" class="boolean optional" type="checkbox" value="1" id="user_legal_protection">
                  </div>
          </div>Add Legal Protection</label>
     </div>
</div>
4

1 回答 1

1

这一行是你的问题：

jQuery('[name="my-checkbox"]').on('change', function() {
                                   ^^^^^^

使用bootstrapswitch你必须使用事件：

switchChange.bootstrapSwitch：在开关状态更改时触发。'this' 指的是 DOM 元素。

一个演示：

$("[name='my-checkbox']").bootstrapSwitch();


$('[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
    console.log('checkbox state: ' + state);
    if (state) {
        jQuery('.initial_quote').hide();
        jQuery('.legal1').show();
        jQuery('#legal2').show();
    } else {
        jQuery('.initial_quote').show();
        jQuery('.legal1').hide();
        jQuery('#legal2').hide();
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://rawgit.com/Bttstrp/bootstrap-switch/master/dist/css/bootstrap3/bootstrap-switch.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/Bttstrp/bootstrap-switch/master/dist/js/bootstrap-switch.min.js"></script>


<div class="form-group boolean optional user_legal_protection">
    <label class="boolean optional" for="user_legal_protection">
        <input value="0" type="checkbox" name="my-checkbox" id="user_legal_protection" type="hidden">
        Add Legal Protection</label>
</div>

于 2017-06-09T20:43:14.343 回答