jquerytwitter-bootstraptoggleswitch

bootstrap toggle and if statements


I am trying to create 3 toggles using bootstrap and I added some if statements, some of them worked but the rest are not working

this is my complete code

<html>
  <head>
    <title>Bootstrap Form Helpers Basic Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


  </head>
  <body>
    <h1>Hello, world!</h1>

<input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email On" data-off="<i class='glyphicon glyphicon-remove'></i> Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150">


<input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150">

<br>
<br>

<input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email & Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Email & Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300">



<script>
	
	
	
	$(function() {
		
		
		$("#toggle-email").on("change", function () {
			if (this.checked) {
				$('#toggle-phone').bootstrapToggle('off');
				$('#toggle-both').bootstrapToggle('off');
			}
			else{
				$('#toggle-phone').bootstrapToggle('on');
				$('#toggle-both').bootstrapToggle('off');
			}
		})
		
		$("#toggle-phone").on("change", function () {
			if (this.checked) {
				$('#toggle-email').bootstrapToggle('off');
				$('#toggle-both').bootstrapToggle('off');
			}
			else{
				$('#toggle-email').bootstrapToggle('on');
				$('#toggle-both').bootstrapToggle('off');
			}
		})
		
		$("#toggle-both").on("change", function () {
			if (this.checked) {
				$('#toggle-email').bootstrapToggle('on');
				$('#toggle-phone').bootstrapToggle('on');
			}
			else{
				$('#toggle-email').bootstrapToggle('on');
				$('#toggle-phone').bootstrapToggle('off');
				
			}
		})
		
		
		
		
	});
	
	
</script>



<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

  </body>
</html>

the if statements are clear and easy to understand my point

any suggestions?

thank you


Solution

  • As I was trying to run your snippet, I kept wondering why I was getting this weird error. After digging through the plugin's documentation, I came across this issue #31. Basically, the change event is being triggered when you call the .bootstrapToggle() method. But in your code, you have change event handlers that call .bootstrapToggle() -- so you are basically firing change() event recursively over and over -- which gives the undesired behavior.

    Using one of the commenters' solutions, you could do:

    $(document).on('click', '[data-toggle=toggle]', function() {
      var input = $(this).find('input')[0]; 
      switch (input.id) {
        case 'toggle-email':
          $('#toggle-phone').bootstrapToggle(!input.checked ? 'on' : 'off');
          $('#toggle-both').bootstrapToggle('off');
          break;
        case 'toggle-phone':
          $('#toggle-email').bootstrapToggle(!input.checked ? 'on' : 'off');
          $('#toggle-both').bootstrapToggle('off');
          break;
        case 'toggle-both':
          $('#toggle-email').bootstrapToggle('on');
          $('#toggle-phone').bootstrapToggle(input.checked ? 'on' : 'off');
          break;
      }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    
    
    
    <input id="toggle-email" checked type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email On" data-off="<i class='glyphicon glyphicon-remove'></i> Email OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
    
    
    <input id="toggle-phone" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="150">
    
    <input id="toggle-both" type="checkbox" data-toggle="toggle" data-on="<i class='glyphicon glyphicon-ok'></i> Email & Phone On" data-off="<i class='glyphicon glyphicon-remove'></i> Email & Phone OFF" data-onstyle="success" data-offstyle="danger" data-width="300">

    Basically, I am attaching a click event handler on the wrapper that gets created around the input element (hence why I use event delegation) and using it to make the changes.