title: Check box with 3 states
body: <p>I am trying to implement a check box with three/four states. See pic below for what i want to achieve. I do have the fa-link working. But, when i click it again instead of not showing fa-link, i want to show an intermediate state with fa-chain-broken.</p>
  
  <p>Here is what  i have so far.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"] {
    -webkit-appearance: initial;
    appearance: initial;
    outline: 1px solid #A9A9A9;
    width: 25px;
    height: 25px;
    background: #FFFFFF;
    position: relative;
  }
  
  input[type="checkbox"]:checked {
    background: #0073C0;
  }
  
  input[type="checkbox"]:checked:after {
    font-family: 'FontAwesome';
    content: "\f0c1";
    color: #fff;
    position: absolute;
    font-size: 22px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*outline: 1px solid #A9A9A9;*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="box1" type="checkbox" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/3IfCu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3IfCu.png" alt="enter image description here"></a></p>
  
  <p>I do have the fa-link working great. How can i add another state for the fa-chain-broken? javascript is completely ok if CSS is not an option.</p>