-1

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

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

在不使用 hidden element的情况下，通过用户的点击使其$(#myinput)不可更改的最佳方法是什么，同时确保它被冻结的任何值仍然可以通过任何表单提交/POST 请求提交？

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

4

2 回答 2

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>

于 2019-01-04T20:49:45.853 回答
0

这是一个提交处理程序的示例，它获取表单元素值以提交 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>

于 2019-01-04T21:23:13.877 回答