Changing input text value with jQuery in form

Question

I have 2 checkbox input and 1 input text. When i click on checkbox #1 i want to disabled checkbox #2 then, add a text (my-text-1) in input text and make it unchangeable

When i click on checkbox #2 i want to disabled checkbox #1 then, add a text (my-text-2) in input text and make it unchangeable

with jQuery 3.4.1

So, it works but...

When i submit the form, the value of the input text is not recorded in my database. It's like the field is empty.

 $(document).ready(function(){ $("#checkbox1").on('click', function(){ if($(this).is(':checked')) { $("#inputtext").val("my-text-1").prop('disabled', true); $("#checkbox2").prop('disabled', true); } else { $("#inputtext").val("").prop('disabled', false); $("#checkbox2").prop('disabled', false); } }); $("#checkbox2").on('click', function(){ if($(this).is(':checked')) { $("#inputtext").val("my-text-2").prop('disabled', true); $("#checkbox1").prop('disabled', true); } else { $("#inputtext").val("").prop('disabled', false); $("#checkbox1").prop('disabled', false); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Checkbox #1</label> <input id="checkbox1" type="checkbox" value="" name="checkbox1"><br/> <label>Checkbox #2</label><input id="checkbox2" type="checkbox" value="" name="checkbox2"><br/> <label>Text: </label><input name="inputtext" id="inputtext" type="text" size="50" maxlength="50" value="" />

Answer 1

Instead of using disabled property on the input[text] element use readonly property. Data for disabled elements does not get submitted:

$("#inputtext").val("my-text-1").prop('readonly', true);

Another alternative would be to enable the element prior to submitting the form.

Reference