How to reset or indetermine a bootstrapswitch?

Question

How to reset or indetermine a bootstrapswitch?

Navigation

#1 by (1 votes)

2

I have a checkbox with bootstrap-switch style, when I run the view it creates it with the value "indeterminate", if I execute state I can change the value to true or false , but I can not put it in "indeterminate" as in the beginning. In the examples there is one that does what I want (Indeterminate) which is to return it to "indeterminate" with a button.

$(document).ready(function() {
  $.fn.bootstrapSwitch.defaults.onText = 'Si';
  $.fn.bootstrapSwitch.defaults.offText = 'No';
  $.fn.bootstrapSwitch.defaults.indeterminate = true;
  $.fn.bootstrapSwitch.defaults.animate = false;

  $('.checkbox_switch').bootstrapSwitch();
});

$(document).on('click', '#si', function() {
		$('#crear_neumat').bootstrapSwitch('state' , true);
});

$(document).on('click', '#indeter', function() {
		$('#crear_neumat').bootstrapSwitch('state' , null);
});

$(document).on('click', '#no', function() {
		$('#crear_neumat').bootstrapSwitch('state' , false);
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

<input type="checkbox" class="checkbox_switch" name="crear_neumat" id="crear_neumat">

<button type="button" id="si" class="btn btn-primary">Si</button>
<button type="button" id="indeter" class="btn btn-primary">Indeterminado</button>
<button type="button" id="no" class="btn btn-primary">No</button>

javascript bootstrap bootstrap-3 bootstrap-switch

asked by Pablo Contreras 08.05.2017 в 21:16

source

1 answer

404 errors in Asp.net MVC application Create canvas with ID according to array

score 1 · Accepted Answer

On the Bootstrap Switch documentation you can see that there are several methods available. One of them is toggleIndeterminate that will change the state to indeterminate.

Then you just have to use that method in the following way:

$(document).ready(function() {
  $.fn.bootstrapSwitch.defaults.onText = 'Si';
  $.fn.bootstrapSwitch.defaults.offText = 'No';
  $.fn.bootstrapSwitch.defaults.indeterminate = true;
  $.fn.bootstrapSwitch.defaults.animate = false;

  $('.checkbox_switch').bootstrapSwitch();
});

$(document).on('click', '#si', function() {
		$('#crear_neumat').bootstrapSwitch('state' , true);
});

$(document).on('click', '#indeter', function() {
		$('#crear_neumat').bootstrapSwitch('toggleIndeterminate');
});

$(document).on('click', '#no', function() {
		$('#crear_neumat').bootstrapSwitch('state' , false);
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

<input type="checkbox" class="checkbox_switch" name="crear_neumat" id="crear_neumat">

<button type="button" id="si" class="btn btn-primary">Si</button>
<button type="button" id="indeter" class="btn btn-primary">Indeterminado</button>
<button type="button" id="no" class="btn btn-primary">No</button>