title: Checkbox props change allthough a preventDefault is calles
body: <p>I'm trying to get a 3-way checkbox to work.
  For this, I want to handle the click or change action myself... ie decide what the next state will be.</p>
  
  <p>But I struggle at the very begin:</p>
  
  <ul>
  <li><p>I initialize a checkbox</p></li>
  <li><p>Set the indeterminate true</p></li>
  <li><p>Check this runtime => indeterminate=true, checked=false</p></li>
  <li><p>Got an event handler for a click with a <code>prevenDefault()</code></p></li>
  <li><p>The markup stays unchanged as expected => looks like an indeterminate checkbox</p></li>
  <li><p>But when I check the values for indeterminate and checked they have toggled none the less</p></li>
  </ul>
  
  <p>Googling for a solution I found that there are 2 ways to create an event handler</p>
  
  <pre><code>$('.chk').click(function(event){});
  </code></pre>
  
  <p>And</p>
  
  <pre><code>$('.chk').on('click',function(event){});
  </code></pre>
  
  <p>I tried both.
  Also tried to change instead of click.
  Even tried having both click and change, with one of them just having the <code>prevenDefault()</code>.</p>
  
  <p>I've got a jsfiddle set up:</p>
  
  <p><a href="https://jsfiddle.net/PeterKaagman/rpmL0gv4" rel="nofollow noreferrer">https://jsfiddle.net/PeterKaagman/rpmL0gv4</a></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-js lang-js prettyprint-override"><code>$(".chk").prop("indeterminate", true);
  $("#out").append("Checked "       + $('#chk_1').prop('checked') + "&lt;br&gt;");
  $("#out").append("Indeterminate " + $('#chk_1').prop('indeterminate') );
  
  $(".chk").click(function(event){
    event.preventDefault();
    
    $("#out").empty();
    console.log(this);
    $("#out").append("Checked "       + this.checked + "&lt;br&gt;");
    $("#out").append("Indeterminate " + this.indeterminate );
  });
  
  //$(".chk").on(change,function(event){
  //  event.preventDefault();
  //})</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;3-way checkbox&lt;/p&gt;
  &lt;input type="checkbox" class="chk" id="chk_1" &gt;
  &lt;div id="out"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Most of it is for debugging as you can see.</p>
  
  <p>What I expected was that the properties checked and indeterminate would not change due to the preventDefault(). Letting me decide the next state of the checkbox.</p>
  
  <p>I'm sure I doing something stupid... could someone plz point it out for me?</p>
  
  <p>Peter</p>