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

publicado por: Anonymous

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:

_x000D_

_x000D_

  $(function() {_x000D_
    $('#toggle-event').change(function() {_x000D_
      $('#console-event').html('Estado: ' + $(this).prop('checked'))_x000D_
    })_x000D_
  })

_x000D_

<!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">_x000D_
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>_x000D_
_x000D_
<input type="checkbox" id="toggle-event" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">_x000D_
<div id="console-event">Estado: true</div>_x000D_
_x000D_
<!-- Latest compiled and minified JavaScript -->_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

_x000D_

_x000D_

_x000D_

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.

solución

Un checkbox con 3 estados:

_x000D_

_x000D_

var $check = $("input[type=checkbox]");_x000D_
var el;_x000D_
_x000D_
$check.data('checked', 0).on('click', function() {_x000D_
_x000D_
    el = $(this);_x000D_
_x000D_
    switch (el.data('checked')) {_x000D_
_x000D_
      case 0:_x000D_
        el.data('checked', 1);_x000D_
        el.prop('indeterminate', true);_x000D_
        console.log('null');_x000D_
        break;_x000D_
_x000D_
      case 1:_x000D_
        el.data('checked', 2);_x000D_
        el.prop('indeterminate', false);_x000D_
        el.prop('checked', true);_x000D_
        console.log('true');_x000D_
        break;_x000D_
_x000D_
      default:_x000D_
        el.data('checked', 0);_x000D_
        el.prop('indeterminate', false);_x000D_
        el.prop('checked', false);_x000D_
        console.log('false');_x000D_
    }_x000D_
  });

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="checkbox" name="checkbox" value="">

_x000D_

_x000D_

_x000D_

Fuente: Rotating amongst the states

UPDATE:

Usando el código anterior, he añadido algo de estilo a los checkbox:

_x000D_

_x000D_

function stateCheckBox(checkBox) {_x000D_
    _x000D_
    var el = checkBox;_x000D_
    var status = 0;_x000D_
    _x000D_
    switch (el.data('checked')) {_x000D_
        _x000D_
        case 0:_x000D_
            el.data('checked', 1);_x000D_
            el.prop('indeterminate', false);_x000D_
            el.prop('checked', true);_x000D_
            status = true;_x000D_
            break;_x000D_
        _x000D_
        case 1:_x000D_
            el.data('checked', 2);_x000D_
            el.prop('indeterminate', false);_x000D_
            el.prop('checked', false);_x000D_
            status = false;_x000D_
            break;_x000D_
    _x000D_
        default:  _x000D_
            el.data('checked', 0);_x000D_
            el.prop('indeterminate', true);_x000D_
            status = null;_x000D_
    }_x000D_
    _x000D_
    return status;_x000D_
}_x000D_
_x000D_
$('.checkbox').on('click', function() {_x000D_
    _x000D_
    var $this = $(this);_x000D_
    var status = stateCheckBox($this.prev());_x000D_
    var statusTxt = '';_x000D_
    _x000D_
    switch (status) {_x000D_
        _x000D_
        case true:_x000D_
    _x000D_
            $this_x000D_
                .removeClass('checkbox false')                _x000D_
                .removeClass('checkbox null')_x000D_
                .addClass('checkbox true');_x000D_
    _x000D_
            statusTxt = 'true';_x000D_
            //console.log('true');_x000D_
            break;_x000D_
        _x000D_
        case false:_x000D_
            _x000D_
            $this_x000D_
                .removeClass('checkbox true')_x000D_
                .removeClass('checkbox null')_x000D_
                .addClass('checkbox false');_x000D_
    _x000D_
            statusTxt = 'false';_x000D_
            //console.log('false');_x000D_
            break;_x000D_
        _x000D_
        default:_x000D_
    _x000D_
            $this_x000D_
                .removeClass('checkbox true')_x000D_
                .removeClass('checkbox false')_x000D_
                .addClass('checkbox null');_x000D_
    _x000D_
            statusTxt = 'null';_x000D_
            //console.log('null');_x000D_
    }_x000D_
    _x000D_
    $this.prev().prev().text('Estado: ' + statusTxt);_x000D_
});

_x000D_

body {_x000D_
  background-color: #000;_x000D_
  -webkit-user-select: none;_x000D_
  -moz-user-select: none;_x000D_
  -ms-user-select: none;_x000D_
  user-select: none;_x000D_
}_x000D_
_x000D_
input[type=checkbox] {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
.checkbox {_x000D_
  width: 80px;_x000D_
  height: 20px;_x000D_
  margin-bottom: 20px;_x000D_
  background-color: #fff;_x000D_
  border-radius: 10px;_x000D_
  position: relative;_x000D_
  transition: all .2s linear;_x000D_
}_x000D_
_x000D_
.checkbox:after {_x000D_
  content: '';_x000D_
  width: 22px;_x000D_
  height: 22px;_x000D_
  border: 1px solid #ccc;_x000D_
  border-radius: 50%;_x000D_
  background-color: #fff;_x000D_
  position: absolute;_x000D_
  top: -2px;_x000D_
}_x000D_
_x000D_
.checkbox.true {_x000D_
  background-color: #0f0;_x000D_
}_x000D_
_x000D_
.checkbox.true:after {_x000D_
  left: -2px;_x000D_
}_x000D_
_x000D_
.checkbox.false {_x000D_
  background-color: #f00;_x000D_
}_x000D_
_x000D_
.checkbox.false:after {_x000D_
  right: -2px;_x000D_
}_x000D_
_x000D_
.checkbox.null {_x000D_
  background-color: #ff0;_x000D_
}_x000D_
_x000D_
.checkbox.null:after {_x000D_
  left: 0;_x000D_
  right: 0;_x000D_
  margin-left: auto;_x000D_
  margin-right: auto;_x000D_
}_x000D_
_x000D_
.estado {_x000D_
  color: #fff;_x000D_
  margin: 15px 0 5px 0;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
_x000D_
<!-- Por defecto: Estado null -->_x000D_
<p class="estado">Estado: null</p>_x000D_
<input type="checkbox" name="checkbox" value="" data-checked="0">_x000D_
<div class="checkbox checkbox null"></div>_x000D_
_x000D_
<!-- Por defecto: Estado true -->_x000D_
<p class="estado">Estado: true</p>_x000D_
<input type="checkbox" name="checkbox" value="" data-checked="1">_x000D_
<div class="checkbox checkbox true"></div>_x000D_
_x000D_
<!-- Por defecto: Estado false -->_x000D_
<p class="estado">Estado: false</p>_x000D_
<input type="checkbox" name="checkbox" value="" data-checked="2">_x000D_
<div class="checkbox checkbox false"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *