How to prevent jquery element from accepting input / changes but still sending data on POST (without using a hidden element)?

Question

I have a checkbox $(#myinput) and based on selection of a few combinations of other options, I would like this checkbox to be enforced as checked or enforced as unchecked.

If I use $(#myinput).prop("disabled", true) however, then the value of the checkbox will not be submitted in a generated POST request. Since it is a checkbox, readonly has no effect... that is, readonly does not control whether the input can experience a state change to be toggled on or off via clicking.

Without using a hidden element, what is the best way to make $(#myinput) unchangeable by the user's clicks, but also ensure that whatever value it is frozen with is still submittable via any form submissions / POST requests?

I'm looking for modifying only settings of the checkbox itself, and not adding complexity with a hidden element. Please only add answers if they avoid creating hidden elements.

Part of the problem is that the POST request stores the state of all the UI elements as well, and so if I enable on submit, and then someone navigates to the config page for that example, it will be *enabled* upon loading, even though it ought to be in a state (according to the combination of options) where `myinput` is disabled from changing. This is for a tool that allows creation of complex configuration files, and they often are loaded, changed, saved, cloned, etc. — ely, Jan 04 '19 at 20:42
To change the above property would be a significant amount of work (this is a fairly legacy system). E.g. it would require all kinds of complex on-load logic to check the enforcement conditions of whatever combination of properties are loaded, so adding a bunch of code there. — ely, Jan 04 '19 at 20:42
What do you mean `the POST request stores the state of all the UI elements` — Isaac Vidrine, Jan 04 '19 at 20:43
Make an onclick handler and check the condition and return true/false if it can be checked/unchecked. — Tyr, Jan 04 '19 at 20:43
Are you using ASP.net webforms or what ? this case can occur in webforms but it shouldn't in MVC or others. — Dabbas, Jan 04 '19 at 20:46
Honestly, if the true/falseness of the input is dependent on different combinations of others then shouldn't you be doing backend validation on this, anyway? Any solution here will not *actually* prevent the value of the POST from changing if the request is intercepted by the client. No amount of front-end validation is an acceptable replacement for backend validation. I suggest you leave it as "disabled" and set the correct value in the backend — Leroy Stav, Jan 04 '19 at 20:49
@LeroyStav there is backend validation. This change was requested by some of our users who found it difficult to not create combinations of settings that were invalid. They requested that if some choices of settings led to other settings becoming invalid, that this be dynamically reflected in the UI as it happens. — ely, Jan 04 '19 at 20:51
Just make a function to handle your submit? You can very easily get the values from the form, validate, then make an ajax request. So then your form element would be like `
` — Isaac Vidrine, Jan 04 '19 at 20:57
Which is fine, again: Leave it "disabled" and take care of it in the backend as part of the validation.... — Leroy Stav, Jan 04 '19 at 21:20

score 1 · Answer 1 · answered Jan 04 '19 at 20:49

1

Just a demo of Jankapunkt suggestion, works

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>

answered Jan 04 '19 at 20:49

Bibberty

4,670
2
8
23

Might be an idea to add CSS as well to make it look `disabled` as well. – Bibberty Jan 04 '19 at 20:50
1

For `type="text"` inputs you can prevent them from being focused by doing that to the `mousedown` event. – Titus Jan 04 '19 at 20:52
1

Please also read [this SO](https://stackoverflow.com/questions/7851868/whats-the-proper-value-for-a-checked-attribute-of-an-html-checkbox) on how to properly assign `checked` values (even if `true` works). Same goes for `disabled`. – Jankapunkt Jan 04 '19 at 20:53

score 0 · Answer 2 · answered Jan 04 '19 at 21:23

Here is an example of a submit handler that gets the form element values to submit an ajax request. Notice the checkbox field is disabled, but it doesn't matter because you just get their values when the form is submitted.

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>

How to prevent jquery element from accepting input / changes but still sending data on POST (without using a hidden element)?

2 Answers2