title: How to conditionally set required attribute when element is not hidden
body: <p>Whenever I place a <code>$(".Othertext").attr('required', '');</code> before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?          </p>
  
  <pre><code>&lt;label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="DF4"&gt;
       &lt;input type="radio" id="DF4" class="mdl-radio__button" name="DF" value="4"&gt;
       &lt;span class="mdl-radio__label"&gt;Other - please describe in detail&lt;/span&gt;
  &lt;/label&gt;
  
  &lt;div class="Othertext"&gt;
      &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
           &lt;input class="mdl-textfield__input" type="text" id="othertext"&gt;
           &lt;span class="mdl-textfield__label"&gt;Describe...&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function(){
        $(".Othertext").hide();
        $('input[type=radio][name=DF]').change(function() {
        if($(this).val() == 4)
            $(".Othertext").show();
        else
            $(".Othertext").hide();
        });
    });
  &lt;/script&gt;
  </code></pre>