如何防止 jquery 元素接受输入/更改但仍然在 POST 上发送数据（不使用隐藏元素）？答案

【问题标题】：How to prevent jquery element from accepting input / changes but still sending data on POST (without using a hidden element)?如何防止 jquery 元素接受输入/更改但仍然在 POST 上发送数据（不使用隐藏元素）？
【发布时间】：2025-12-17 00:20:05
【问题描述】：

我有一个复选框 $(#myinput)，并且基于对其他选项的一些组合的选择，我希望这个复选框被强制为选中或未选中。

但是，如果我使用$(#myinput).prop("disabled", true)，那么复选框的值将不会在生成的 POST 请求中提交。由于是复选框，readonly 没有任何作用……也就是说，readonly 不控制输入是否可以通过单击来切换状态更改。

不使用隐藏元素，让$(#myinput) 无法通过用户点击更改的最佳方法是什么，同时确保它被冻结的任何值仍然可以通过任何表单提交/ POST 请求？

我正在寻找仅修改复选框本身的设置，而不是通过隐藏元素增加复杂性。请仅在避免创建隐藏元素时添加答案。

【问题讨论】：

提交时可以enable吗？
部分问题是 POST 请求也存储了所有 UI 元素的状态，因此如果我在提交时启用，然后有人导航到该示例的配置页面，它将在加载时启用，即使它应该处于禁用myinput 更改的状态（根据选项的组合）。这是一个允许创建复杂配置文件的工具，它们经常被加载、更改、保存、克隆等。
更改上述属性将是大量工作（这是一个相当遗留的系统）。例如。它需要各种复杂的加载逻辑来检查加载的任何属性组合的执行条件，所以在那里添加一堆代码。
防止点击事件默认？
老实说，如果输入的真/假取决于其他人的不同组合，那么您不应该对此进行后端验证吗？如果请求被客户端截获，这里的任何解决方案都不会实际上阻止 POST 的值发生变化。没有多少前端验证可以替代后端验证。我建议您将其保留为“禁用”并在后端设置正确的值

标签： javascript jquery html checkbox readonly-attribute

【解决方案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>

【讨论】：

添加 CSS 以使其看起来也像 disabled 可能是一个想法。
对于type="text" 输入，您可以通过对mousedown 事件执行此操作来防止它们被聚焦。
请阅读this SO，了解如何正确分配checked 值（即使true 有效）。 disabled 也是如此。

【解决方案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>

【讨论】：