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>

score 1 · Accepted Answer · answered Jun 09 '17 at 20:43

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>

Excellent thank you very much! Not sure I'd of ever figured that out!! — DanRio, Jun 12 '17 at 12:09
Hey, I'm having difficulty making this work on page load, it works fine once the change event happens but unless that has been activated via clicking the switch (checkbox) it is still showing both divs. Any idea how to solve that? Thanks — DanRio, Jul 17 '17 at 14:58
Yes wrapped in document ready and no errors in the console. Can't figure it out. — DanRio, Jul 17 '17 at 18:29
It's quite a complicate form so it seems there's too much going on backend to reproduce it in a snippet unfortunately. Will continue to look into it and post any updates. Thanks. — DanRio, Jul 17 '17 at 18:42

Find state of checkbox using Bootstrap Switch and Ruby on Rails

1 Answers1