title: set bootstrap "required" attribute on textarea only if specific radio button selected
body: <p>This is one of my first post here and I'm amateur at all of this, so please bear with me.</p>
  
  <p>I do display a textarea with Jquery depending on a radio button selection (3 radio button so 3 hypothetical textarea).</p>
  
  <p>I do set the bootstrap "required" attribute on them but, as only 1 among 3 is displayed, I cannot validate the form because the 2 other boxes are empty...</p>
  
  <p>Any idea how to enable this attribute with Bootstrap or Jquery only on the displayed (active) textarea ?</p>
  
  <p>Thanks for your help.</p>
  
  <hr>
  
  <p>Here is the code: </p>
  
  <pre><code>&lt;div class="form-row"&gt;
      &lt;div class="col-md-12 mb-3"&gt;
          &lt;label for="type_demande"&gt;Request type&lt;/label&gt;
  
          &lt;div class="custom-control custom-radio form-control-sm"&gt;
              &lt;input type="radio" id="besoin_hw_remplacement" name="request_type" class="custom-control-input" value="hw_remplacement" required="" /&gt;
              &lt;label class="custom-control-label" for="besoin_hw_remplacement"&gt;Replace X&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="custom-control custom-radio form-control-sm"&gt;
              &lt;input type="radio" id="besoin_sw_remplacement" name="request_type" class="custom-control-input" value="sw_remplacement" required="" /&gt;
              &lt;label class="custom-control-label" for="besoin_sw_remplacement"&gt;Replace Y&lt;/label&gt;
          &lt;/div&gt;                      
      &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="form-group" id="hw_remplacement_details" style="display:none"&gt;
      &lt;label for="details_projet"&gt;Replace X&lt;/label&gt;
      &lt;textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details X..." required="" /&gt;&lt;/textarea&gt;
      &lt;div class="invalid-feedback"&gt;
          Please give details
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group" id="sw_remplacement_details" style="display:none"&gt;
      &lt;label for="details_projet"&gt;Replace Y&lt;/label&gt;
      &lt;textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details Y" required="" /&gt;&lt;/textarea&gt;
      &lt;div class="invalid-feedback"&gt;
          Please give details
      &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;script type="text/javascript"&gt;
      $("input[name='request_type']:radio")
      .change(function() {
          $("#hw_remplacement_details").toggle($(this).val() == "hw_remplacement");
          $("#sw_remplacement_details").toggle($(this).val() == "sw_remplacement"); 
  });
  &lt;/script&gt;   
  </code></pre>