Find state of checkbox using Bootstrap Switch and Ruby on Rails

Question

I'm trying to access the state of a checkbox that has been made into a switch using the Bootstrap Switch (http://bootstrapswitch.com/) and the Bootstrap Switch gem with Ruby on Rails. With this I'm then aiming to show / hide certain divs.

I had it working for standard radio buttons but for a checkbox that's been changed into a switch I can't work it out. Any help would be great thanks.

Using Simple Form gem for my form:

    <%= 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()
}
});

Relevant Html output:

<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>

Answer 1

This line is your issue:

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

Using bootstrapswitch you have to use the event:

switchChange.bootstrapSwitch: Triggered on switch state change. 'this' refers to the DOM element.

A demo:

$("[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>