I'm using: / and getting the above error. Basically I'm trying to make it so that when a user starts typing in a form-field, the toggle switches from 'off' to 'on'.

HTML:

 <div class="row">

    <div class="col-sm-2 pull-right toggle">
      <input name="assessment[answer][tracking]" type="hidden" value="0" /><input class="trackable" data-on-text="Yes" data-off-text="No" data-on-color="success" type="checkbox" value="1" name="assessment[answer][tracking]" id="assessment_answer_tracking" />
    </div>

    <div class="col-sm-10 question">
        <textarea class="form-control" name="assessment[answer][content]" id="assessment_answer_content">
        </textarea>
     </div>

  </div>

JS:

<script>

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

  $('.form-control').on("click paste", function(event){
         $("[name='my-checkbox']").bootstrapSwitch('setState', true);
   });

</script>

Any ideas?

EDIT - Callstack:

Uncaught TypeError: Cannot read property 'apply' of undefined
  (anonymous function) @ bootstrap-switch-174a86fa717c568c8ba0a257ad07ce25.js?body=1:682
  jQuery.extend.each @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:385
  jQuery.fn.jQuery.each @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:137
  $.fn.bootstrapSwitch @ bootstrap-switch-174a86fa717c568c8ba0a257ad07ce25.js?body=1:674
  (anonymous function) @ new?utf8=✓&assessment[patient_id]=1&assessment[user_id]=1&assessment[template_id]=2&mit=Create+A…:1114
  jQuery.event.dispatch @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:4666
  elemData.handle @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:4334

I'm using: http://www.bootstrap-switch/ and getting the above error. Basically I'm trying to make it so that when a user starts typing in a form-field, the toggle switches from 'off' to 'on'.

HTML:

 <div class="row">

    <div class="col-sm-2 pull-right toggle">
      <input name="assessment[answer][tracking]" type="hidden" value="0" /><input class="trackable" data-on-text="Yes" data-off-text="No" data-on-color="success" type="checkbox" value="1" name="assessment[answer][tracking]" id="assessment_answer_tracking" />
    </div>

    <div class="col-sm-10 question">
        <textarea class="form-control" name="assessment[answer][content]" id="assessment_answer_content">
        </textarea>
     </div>

  </div>

JS:

<script>

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

  $('.form-control').on("click paste", function(event){
         $("[name='my-checkbox']").bootstrapSwitch('setState', true);
   });

</script>

Any ideas?

EDIT - Callstack:

Uncaught TypeError: Cannot read property 'apply' of undefined
  (anonymous function) @ bootstrap-switch-174a86fa717c568c8ba0a257ad07ce25.js?body=1:682
  jQuery.extend.each @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:385
  jQuery.fn.jQuery.each @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:137
  $.fn.bootstrapSwitch @ bootstrap-switch-174a86fa717c568c8ba0a257ad07ce25.js?body=1:674
  (anonymous function) @ new?utf8=✓&assessment[patient_id]=1&assessment[user_id]=1&assessment[template_id]=2&mit=Create+A…:1114
  jQuery.event.dispatch @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:4666
  elemData.handle @ jquery-42fea4da63227b267ff49e07abf47db0.js?body=1:4334

• javascript
• jquery
• twitter-bootstrap

• Can you please post the callstack trace? – TaoPR Commented Jun 2, 2015 at 5:21

4 Answers 4

I have the same problem. It seems there is a bug with bootstrap switch. If all you want is to switch it from 'off' to 'on', then you can apply this to your code:

$('.form-control').on("click paste", function(event){
     $("[name='my-checkbox']").each( function(){
         if ( ! $(this).bootstrapSwitch('state')) { //check if is not checked
              $(this).bootstrapSwitch('toggleState'); //change the checkbox state
         }
     });
});

Method setState seems to have problems, then if you check the state for each of your checkboxes and then toggle it under any condition you can have the same result.

To toggle it to off, just remove the negative condition "!". This solution worked for me.

Try this

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

Make sure you include the Jquery and Bootstrap libraries before Bootstrap switch.

In my case, it was v3 present as the library in my HTML, but the API being referred to v2. You might probably want to check the version being used and lookup the correct documentation