CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3
Scorpioniz
Scorpioniz

Reputation: 1449

bootstrap toggle with multiple same input not working

Bootstrap toggle with multiple same input not working unless pressing not the first input.. and still not all of them is checked/unchecked..

I've made small example

and I need to make if I press one, that all others would have the same state.

$(document).ready(function(){
  $('.testClass').on('change', function() {
    if($(this).prop('checked')) {
      $('.testClass').each(function(key, val) {
        $(val).bootstrapToggle('on');
      });
    } else {
      $('.testClass').each(function(key, val) {
        $(val).bootstrapToggle('off');
      });
    }
  })
});

Any suggestions how to make this happen?

Upvotes: 2

Views: 2078

Answers (3)

T. Dirks
T. Dirks

Reputation: 3676

@digital-pollution just beat me to the explanation but I think I found a bit of a better solution. It basically removes the on('change') event at the start and adds it back in the end.

var toggleButtons = function toggleButtons() {
  $('.testClass').off('change');
  if($(this).prop('checked')) {
    $('.testClass').not($(this)).each(function(key, val) {
        $(val).bootstrapToggle('on');
      });
    } else {
      $('.testClass').not($(this)).each(function(key, val) {
        $(val).bootstrapToggle('off');
      });
    }
    $('.testClass').on('change', toggleButtons);
}

$(document).ready(function(){
  $('.testClass').on('change', toggleButtons);
});
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox"
       class="testClass"
       data-toggle="toggle"
       data-on="test"
       data-off="NOT"
>

<input type="checkbox"
       class="testClass"
       data-toggle="toggle"
       data-on="test"
       data-off="NOT"
>

<input type="checkbox"
       class="testClass"
       data-toggle="toggle"
       data-on="test"
       data-off="NOT"
>

Upvotes: 3

digital-pollution
digital-pollution

Reputation: 1074

it looks like that code is causing an infinate loop, I'm not familiar with the plugin but here is a work around. If i understand the goal you want to set all toggle to the same state when one is changed.

$(document).ready(function(){
  $('.toggle-group').on('click', function(e) {
    // wait for the plugin to update the actual checkbox
    setTimeout(function(){
        // check if the checkbox is checked or not  
        var state = ( $(e.currentTarget).prev('input')[0].checked ) ?
        'on' : 'off';

      // update all the bootstrapToggle checkbox instances with the new 
      // state
      $('.testClass').each(function(key, val) {
        $(val).bootstrapToggle(state);
      });

    }, 50);
  });
});

What I think is happening is in example your code the "change" event constantly refires in a loop. This answer is far from an elegant solution but highlights the issue. The setTimeout is to allow the plugin to update the checkbox before testing it, since it doesn't look like the bootstrapToggle accepts any callback.

Upvotes: 2

Rahul Pawar
Rahul Pawar

Reputation: 1036

Just remove $('.testClass').each(function(key, val) { from code

  $(document).ready(function(){
    $('.testClass').on('change', function() {
      if($(this).prop('checked')) {
          $(this).bootstrapToggle('on');
      } else {
          $(this).bootstrapToggle('off');
      }
    })
  });

Upvotes: 0

Related Questions