Skip to main content

¿Cómo puedo crear un checkbox con 3 estados (true, null, false) con bootstrap?

Como utilizo bootstrap me busqué este estilo para realizarlo más amigable al usuario, puesto que en ellos represento botones con estados true y false.

Lo realizo de la siguiente manera:

  $(function() {
    $('#toggle-event').change(function() {
      $('#console-event').html('Estado: ' + $(this).prop('checked'))
    })
  })
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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 type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">
<div id="console-event">Estado: true</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Yo quisiera que tuviera un tercer estado que es null. ¿Existe la posibilidad? O si existe otra herramienta que si me da esa opción bienvenida sea la sugerencia.

bypabloc_
  • 1.9k
  • 15
  • 46
  • 102