JSFiddle - React, Tailwind, and code Playground

by cooper081

HTML

<div id="datepicker-wrapper" style="width:50%;">
   <p class="form-row form-row-wide validate-required" id="my_datepicker_field" data-priority="">
      <label for="my_datepicker" class=""> Delivery Date &nbsp;<abbr class="required" title="required" aria-required="true">*</abbr></label>
      <span class="woocommerce-input-wrapper">
         <select name="my_datepicker" id="my_datepicker" class="select select2-hidden-accessible enhanced" data-allow_clear="true" data-placeholder=" Delivery Date & Time" required="required" tabindex="-1" aria-hidden="true" aria-required="true">
            <option value="" selected="selected"></option>
            <option value="1">31-Dec-2020 From 13 to 17</option>
            <option value="2">01 Jan 2021 From 13 to 17</option>
         </select>
         <span class="select2 select2-container select2-container--default" dir="rtl" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-my_datepicker-container" role="combobox"><span class="select2-selection__rendered" id="select2-my_datepicker-container" role="textbox" aria-readonly="true"><span class="select2-selection__placeholder"> Delivery Date & Time</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
      </span>
   </p>
   <br>
</div>
<hr>
select id : my_datepicker<br>
button id : place_order<br>
if selected some item, place order button should be enabled
<hr>
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place Order" data-value="Place Order"> Place Order</button>
<ul role="menu" aria-label="Pagination">
   <li class="" aria-disabled="false" style=""><a href="#previous" role="menuitem">Previous</a></li>
   <li aria-hidden="true" aria-disabled="true"...

JavaScript

$(document).ready(function(){
    $('#my_datepicker').bind('change', function () {
        if($(this).val() != ''){
          $("#place_order").attr("disabled", false);
        }else{
        	$("#place_order").attr("disabled", true);
        }
    $('#my_datepicker').trigger('change');
    });

});