Чекбокс изменяет реквизиты, хотя предотвращение по умолчанию - это вызовы

Question

Я пытаюсь заставить работать трехсторонний флажок. Для этого я хочу самостоятельно обработать щелчок или изменить действие ... т.е. решить, каким будет следующее состояние.

Но я борюсь в самом начале:

• Я устанавливаю флажок

• Установить неопределенное значение true

• Проверить это время выполнения => неопределенный = true, проверено = false

• Получил обработчик событий для клика с prevenDefault()

• Разметка остается неизменной, как и ожидалось => выглядит как неопределенный флажок

• Но когда я проверяю значения для неопределенных и проверяемых, они, тем не менее, переключаются

Поиск в поиске решения Я обнаружил, что существует 2 способа создания обработчика событий

$('.chk').click(function(event){});

И

$('.chk').on('click',function(event){});

Я пробовал оба. Также пытался изменить вместо клика. Даже пытался иметь и клик и изменение, с одним из них просто prevenDefault().

У меня настроен jsfiddle:

https://jsfiddle.net/PeterKaagman/rpmL0gv4

$(".chk").prop("indeterminate", true);
$("#out").append("Checked "       + $('#chk_1').prop('checked') + "<br>");
$("#out").append("Indeterminate " + $('#chk_1').prop('indeterminate') );

$(".chk").click(function(event){
  event.preventDefault();
  
  $("#out").empty();
  console.log(this);
  $("#out").append("Checked "       + this.checked + "<br>");
  $("#out").append("Indeterminate " + this.indeterminate );
});

//$(".chk").on(change,function(event){
//  event.preventDefault();
//})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>3-way checkbox</p>
<input type="checkbox" class="chk" id="chk_1" >
<div id="out"></div>

Большинство из них предназначено для отладки, как вы можете видеть.

Что я ожидал, так это то, что проверенные и неопределенные свойства не изменятся из-за метода protectDefault (). Позвольте мне решить следующее состояние флажка.

Я уверен, что я делаю что-то глупое ... может кто-нибудь, пожалуйста, укажет мне на это?

Peter

Answer 1

.preventDefault() предотвращает "нормальное поведение" флажка, отмеченного или не отмеченного ... Но, похоже, это не влияет на свойства флажка ... которые все равно изменяются. Ваш фрагмент доказывает это.

Я ожидал, что проверенные и неопределенные свойства не изменятся ...

Я бы тоже! Я не знал ... И я не могу объяснить, почему это так. Так что, на мой взгляд, это очень хороший вопрос! Но я думаю, что нашел способ обойти эту проблему ...

Хитрость заключается в сохранении состояния флажка на mousedown. Это до того, как свойства изменятся. На click, что происходит сразу после ... Восстановить эти свойства.

Тогда делай, что хочешь ...

$(".chk").prop("indeterminate", true);
$("#out").append("Checked "       + $('#chk_1').prop('checked') + "<br>");
$("#out").append("Indeterminate " + $('#chk_1').prop('indeterminate') );


var checkbox_state_on_mousedown = {};
$(".chk").on("mousedown click",function(event){
  event.preventDefault();
  
  if(event.type=="mousedown"){
    // Store checkbox state before the click changes them
    checkbox_state_on_mousedown = {
      checked:this.checked,
      indeterminate:this.indeterminate
    };
    // Stop the handler's execution here
    return;
  }
  
  
  $("#out").empty();
  console.log(this);
  $("#out").append("<b>On mousedown:</b><br>");
  $("#out").append("Checked "       + checkbox_state_on_mousedown.checked + "<br>");
  $("#out").append("Indeterminate " + checkbox_state_on_mousedown.indeterminate);
  $("#out").append("<br><br>");
  
  $("#out").append("<b>On click:</b><br>");
  $("#out").append("Checked "       + this.checked + "<br>");
  $("#out").append("Indeterminate " + this.indeterminate );
  $("#out").append("<br><br>");
  
  // Restore the "before click" properties
  $(this).prop(checkbox_state_on_mousedown);
  
  $("#out").append("<b>Properties restored:</b><br>");
  $("#out").append("Checked "       + this.checked + "<br>");
  $("#out").append("Indeterminate " + this.indeterminate );
  
  // Do what you like with the restored properties from here...
  // ...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>3-way checkbox</p>
<input type="checkbox" class="chk" id="chk_1" >
<div id="out"></div>

CodePen