Как запретить элементу jquery принимать ввод / изменения, но при этом отправлять данные по POST (без использования скрытого элемента)?

Question

У меня есть флажок $(#myinput) и исходя из выбора нескольких комбинаций других опций, я бы хотел, чтобы этот флажок применялся как отмеченный или как не отмеченный.

Если я использую $(#myinput).prop("disabled", true) однако тогда значение флажка не будет отправлено в сгенерированном запросе POST. Так как это флажок, readonly не имеет никакого эффекта... то есть readonly не контролирует, может ли вход изменять состояние, которое будет включено или выключено нажатием.

Без использования скрытого элемента, что является лучшим способом сделать $(#myinput) неизменяемый щелчками пользователя, но также гарантирующий, что какое-либо значение, с которым оно заморожено, все еще может быть отправлено через любые представления формы / запросы POST?

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

Answer 1

Просто демонстрация предложения Jankapunkt, работает

document.addEventListener('DOMContentLoaded', function() {

  let button = document.querySelector('#myCheck');
  console.log(button);
  button.addEventListener('click', function(event) {
    event.preventDefault();
    return;
  });

});

<div>
  <input id="myCheck" type="checkbox" checked="true">
</div>

Answer 2

Вот пример обработчика отправки, который получает значения элемента формы для отправки ajax-запроса. Обратите внимание, что поле флажка отключено, но это не имеет значения, потому что вы просто получаете их значения при отправке формы.

function check() {
  var val = $('#input1').val();
  console.log(val);
  if (val == "isaac") {
    $('#mycheckbox').prop('checked', true);
  } else {
    $('#mycheckbox').prop('checked', false);
  }
  
}

$('#input1').on('keyup', function() { $(this).blur(); $(this).focus(); });


$('#my-form').submit(function(e){
    e.preventDefault();
    console.log("Submit hit");
    var obj = {
      inputVal1: $('#input1').val(),
      checkedVal: $('#mycheckbox').prop('checked')
    }
    
    console.log(obj)
    //Here is where you would make an ajax request with the form data
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<input onchange="check()" id="input1" type="text" placeholder="type something"/><br />
<p style="display:inline-block">Does the input say "isaac"?</p>
<input style="display:inline-block" disabled="true" id="mycheckbox" type="checkbox" /><br />
<button type="submit">Submit</button>
</form>