从下拉列表中选择其他选项时激活文本框

Question

I need help with my email order form.

When someone selects the "Self-Collection" option, it will make the date and time selection active for the user. And I want to make the date and time selection a required field. How can I do it?

And also please visit the link here .

After adding the code below, the email cannot be sent.

   <div class="section colm colm6">
   <label class="field select">
   <select name="select" id="select">
    <option value="">Delivery Methods...</option>
                                    <option value="Register-Mail">     Register Mail </option>
                                    <option value="Normal-Mail"> Normal Mail </option>
                                    <option value="Self-Collection">   Self-Collection </option>
                                    <option value="QVOO-Delivery"> QVOO Delivery (+$8) </option>
   </select>
    <i class="arrow double"></i>                    
                            </label>  
  </div>


                </div><!-- end frm-row section -->
                <center><strong><p>**WE will re-confirm your self collection date once your order arrives</p></strong></center>
       <div class="section colm colm6">
                   <label class="field select">
                       <select id="Self-Collection" name="Self-Collection" disabled='disabled'>
                           <option value="">Self Collection Date...        </option>
                           <option value="Monday After 7pm">Monday After 7pm</option>
                           <option value="Wednesday After 7pm"> Wednesday After 7pm </option>
                           <option value="Friday After 7pm"> Friday After 7pm </option>
                           <option value="Saturday Day 9am-2pm"> Saturday Day 9am-2pm </option>
                           <option value="Sunday 9am-2pm"> Sunday 9am-2pm </option>
                       </select>
                       <i class="arrow double"></i>                    
                   </label>  
                  </div>


      $(document).ready(function () {
     $("#select").change(function () {
    if ($(this).find("option:selected").val() == "Self-Collection") {
        $("#Self-Collection").removeAttr("disabled")
    } else {
        $("#Self-Collection").attr("disabled","disabled")
    }
     });
    });

Answer 1

have you tried placing required attribute on your select button.

I have edited my answer. Please check.

$(document).ready(function () {
  $("#select").change(function () {
  if ($(this).find("option:selected").val() == "Self-Collection") {
    $("#Self-Collection").removeAttr("disabled");
    $("#Self-Collection").attr("required","true");
  } else {
    $("#Self-Collection").attr("disabled","disabled");
    $("#Self-Collection").removeAttr("required");
  }
  });
});