JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h3>Lo mejor es…</h3>
            <div class="form">
                <div class="checkbox">
                    <label>
                        <input data-toggle="toggle" data-onstyle="success" data-style="ios" type="checkbox" value="1" id="check-1"> Bueno
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input data-toggle="toggle" data-onstyle="primary" data-style="ios" type="checkbox" value="2" id="check-2"> Bonito
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input data-toggle="toggle" data-onstyle="danger" data-style="ios" type="checkbox" value="3" id="check-3"> Barato
                    </label>
                </div>
            </div>
        </div>  
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins');
 
body {
  background: #dbe2ff;
  padding: 20px;
  font-family: 'Poppins', 'Helvetica', 'Arial', sans-serif;
}

.checkbox {
  padding: 10px;
}

.checkbox label {
  font-weight: 300;
  font-size: 20px;
}

.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
.toggle.ios .toggle-handle { border-radius: 20px; }

JavaScript

$('input[type="checkbox"]').change(function(){
	if ($('input[type=checkbox]:checked').length == 3) {
    var uncheck = 0;
    if ( $(this).val() == 1 ) {
    	uncheck = 3;
    } else if ( $(this).val() == 2) {
      uncheck = 1;
    } else {
      uncheck = 2;
    }
    $('#check-'+uncheck).bootstrapToggle('off');
  }
});