title: Only one checkbox to be checked at time
body: <p>Well may be is easy but how can I make only one checkbox to be checked at time? Here is my checkboxes</p>
  
  <pre><code>&lt;label class="checkbox-inline"&gt;
        &lt;input type="checkbox" name="skills" id="radio" value="1"&gt; 1
  &lt;/label&gt;
  &lt;label class="checkbox-inline"&gt;
        &lt;input type="checkbox" name="skills" value="2"&gt; 2
  &lt;/label&gt;
  &lt;label class="checkbox-inline"&gt;
        &lt;input type="checkbox" name="skills" value="3"&gt; 3
  &lt;/label&gt;
  </code></pre>
  
  <p>And JS that I use for the animation on them</p>
  
  <pre><code>$(function() {
  
  $('input[type=checkbox]').each(function() {
      var span = $('&lt;span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"&gt;&lt;/span&gt;').click(doCheck).mousedown(doDown).mouseup(doUp);
      if ($(this).is(':checked')) {
          span.addClass('checked');
      }
      $(this).wrap(span).hide();
  });
  
  function doCheck() {
      if ($(this).hasClass('checked')) {
          $(this).removeClass('checked');
          $(this).children().prop("checked", false);
      } else {
          $(this).addClass('checked');
          $(this).children().prop("checked", true);
      }
  }
  
  function doDown() {
      $(this).addClass('clicked');
  }
  
  function doUp() {
      $(this).removeClass('clicked');
  }
  });
  </code></pre>
  
  <p>Currently I can check multiple checkboxes.
  <a href="https://jsfiddle.net/7q2y06fq/" rel="nofollow">Here is quick JSFIDDLE</a></p>