derequire input types if checkbox is checked

Question

I have a form that has has almost all input types are required, Like the HTML below:

                <p>Name:*</p>
                  <input type="text" name="Name" required>
                <p>Company Name: </p>
                    <input type="text" name="Company_Name">
                <p>Email: *</p>
                    <input type="email" size="30" name="Email" required>
                <p>Phone:*</p>
                    <input type="text" name="Phone" required>

At the end of the form, I have a checkbox that states,

                    <div class="checkbox">
                       <input type="checkbox"  name="checkbox_name[]" > 
                         <p>I'm Going</p>   
                       <input type="checkbox"  name="checkbox_name[]" >
                         <p>thanks, but I can't go</p>  

                      <input type="checkbox" name="checkbox_name[]" required>                 
                      <p>I have read the above information</p>

Is there a way I can "de-require" the above input types if and only if the "Thanks, but I can't go" checkbox is marked?

That'ts the direction I'm trying to head I just don't know much about jguery. Would using something like .change(function) work here? — Gabriel, Aug 15 '17 at 13:14
There is no point to use jQuery just for this. You can also check with javascript only: `document.getElementById("myCheck").checked = true` and remove attribute like this: `document.getElementById("Email").required = false` — tech2017, Aug 15 '17 at 13:16
I tried to add document.getElementById("Email").required = false to see if it would remove the required field but it did not.I was reading https://stackoverflow.com/questions/25628209/dynamically-change-required-atributte-for-html5-input-control and I tried this but it still not working: function check() {document.getElementById("email").required="required";} and \ — Gabriel, Aug 15 '17 at 13:41
did you add `id` to your email? `` `document.getElementById("email").required = false` NOTE: JavaScript is case-sensitive, `id` should match and must be unique for all inputs — tech2017, Aug 15 '17 at 13:43
Yes I did: and function is: function check() { document.getElementById("email").required = false; } — Gabriel, Aug 15 '17 at 13:48

tech2017 · Accepted Answer · 2017-08-15T14:26:49.700

Check this out. It changes `required attribute based on the checkbox I'm Going or not. You can modify it as you need. I hope you got the idea.

<p>Name:*</p>
<input type="text" name="Name" class="formElem" required>
<p>Company Name: </p>
<input type="text" class="formElem" name="Company_Name">
<p>Email: *</p>
<input type="email" class="formElem" id="email" size="30" name="Email" required>
<p>Phone:*</p>
<input type="text" class="formElem" name="Phone" required>

<div class="checkbox">
  <input id="ckbox" type="checkbox" name="checkbox_name[]" onchange="check()">
  <p>I'm Going</p>
  <input type="checkbox" name="checkbox_name[]">
  <p>thanks, but I can't go</p>

  <input type="checkbox" name="checkbox_name[]" required>
  <p>I have read the above information</p>

  <script>
    function check() {
      var temp = document.getElementsByClassName("formElem");
      if (document.getElementById("ckbox").checked) {            
        for (var e = 0; e < temp.length; e++) { // For each element
          var elt = temp[e];
          elt.required = true;
        }
      } else {
        for (var e = 0; e < temp.length; e++) { // For each element
          var elt = temp[e];
          elt.required = false;
        }
      }
    }
  </script>

Yeah that did the trick for that element. Now if I wanted to have that function for all elements in the form, like phone and name, could I just get the id of a div? For example:
Name:*

Company Name:

Email: *

Phone:* — Gabriel, Aug 15 '17 at 14:18
check my edited answer. You you are applying same rule on multiple elements, you can also use `class` instead of using `id`. — tech2017, Aug 15 '17 at 14:26
Yup that did the trick as well! Learned a whole lot about JS here so thank you for the help! — Gabriel, Aug 15 '17 at 14:45

derequire input types if checkbox is checked

1 Answers1