To make a textblock required when set as “block”

I was wondering if it is possible to set a textblock to required only when activated by clicking on a checkbox.
I have one checkbox that can be activated in contact form 7 using:
<input type="checkbox" id="Propulsion and Stabilization" onclick="myFunction()"> Propulsion and Stabilization
which will activate the following function (html script in headers and footers plugin):

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("Propulsion and Stabilization");
  // Get the output text
  var text = document.getElementById("textPS")

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
    }
    else {
    text.style.display = "none";
    }
}

which will open the following in contact form 7:

<p id="textPS" style="display:none"><label> Ship Length
[text text-234 id:text1]</p> </label>

How I want to make the textblock where I fill in the “Ship Length” required but only when the checkbox “Propulsion and Stabilization” is activated.

I have tried adding

element.setAttribute("required", "")
element.required = true;

and more to the script in header and footer plugin but nothing makes the field required after activation.

Any ideas on how to fix this?
Thanks!