<div class="wrap">
  <div class="block">
    <span>cheap</span>
    <input data-index="0" id="cheap" type="checkbox" />
    <label for="cheap"></label>
  </div>
  <div class="block">
    <span>fast</span>
    <input data-index="1" id="fast" type="checkbox" />
    <label for="fast"></label>
  </div>
  <div class="block">
    <span>good</span>
    <input data-index="2" id="quality" type="checkbox" />
    <label for="quality"></label>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700&subset=cyrillic');
input{
  display:none;  
}
.block{
  width:200px;
  position:relative;
  clear:both;
  margin:0 0 25px;
  float: left;
}
span{
  text-transform:uppercase;
  font-family:'Roboto Condensed', sans-serif;
  font-weight:bold;
  letter-spacing:1px;
  font-size:15px;
  float:right;
  width:85px;
  margin:16px 0 0;
}
.wrap{
  width:200px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:30px 30px 5px;
}
label{
  width:100px;
  height:50px;
  box-sizing:border-box;
  border:3px solid;
  float:left;
  border-radius:100px;
  position:relative;
  cursor:pointer;
  transition:.3s ease;
}
input[type=checkbox]:checked + label{
  background:#55e868;
}
input[type=checkbox]:checked + label:before{
  left:50px;
}
label:before{
  transition:.3s ease;
  content:'';
  width:40px;
  height:40px;
  position:absolute;
  background:white;
  left:2px;
  top:2px;
  box-sizing:border-box;
  border:3px solid;
  color:black;
  border-radius:100px;
}

$('input[type=checkbox]').change(function(){
  counter = 0;
  clicked = $(this).data('index');
  $('input[type=checkbox]').each(function(){
    if($(this)[0].checked){
      counter++;
    }
  });
  if(counter==3){    
    toDisable = clicked;
    while(toDisable==clicked){
      toDisable=Math.round(Math.random()*2);
    }
    $("input:eq("+toDisable+")")[0].checked = false;
  }
});