Answer a question

I have added select custom field to woocommerce checkout page :

// Add custom checkout datepicker field
 
add_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' );
function checkout_display_datepicker_custom_field( $checkout ) {
    
    echo '<div id="datepicker-wrapper" style="width:50%;">';
    
       $field_id = 'my_datepicker';
       $today = strtotime('today');
       $tomorrow = strtotime('tomorrow');
    
     woocommerce_form_field(  $field_id, array(
        'type'          => 'select',
        'class'         => array('form-row-wide'),
        'label' => __('Delivery Date'),
        'placeholder'   => __('Select Delivery Date'),
        'required' => true, // Or false
        'onchange' => 'ValidateDropDwon(this)',
        'options'     => array(
            '' => '',
            date(('d F Y'), $today ) => date(('d F Y'), $today ),
            date(('d F Y'), $tomorrow ) => date(('d F Y'), $tomorrow ),
        )));

     echo '<br></div>';
     
    
}

and used this jQuery to check if one item of select field is selected and then enable "Place Order" button:

jQuery(document).ready( function(){
function ValidateDropDwon(dd){
  var input = document.getElementById('place_order')
  if(dd.value == '') input.disabled = true; else input.disabled = false;
}

});

but it doesn't work and "Place Order" button is always active! I really don't have any idea why it doesn't work!?

Answers

Make sure function is called

Add console.log('Im call ValidateDropDwon') inside function ValidateDropDwon then reload your page.

Ex :

function ValidateDropDwon(dd){
  console.log('Im call ValidateDropDwon')
  var input = document.getElementById('place_order')
  if(dd.value == '') input.disabled = true; else input.disabled = false;
}

Press F12 to open your browser console and see is Im call ValidateDropDwonshowing in browser console.

Based on your problem, function ValidateDropDwon is not called.

Check HTML output

Let we check in HTML output of PHP

Datepicker output

<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>

Place order button output

<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" class="disabled" style="display: none;"><a href="#next" role="menuitem" style="outline: none;">Next</a></li>
   <li aria-hidden="false" style=""><a href="#finish" role="menuitem" class="finish-btn">Place Order</a></li>
</ul>

See, your PHP have 'onchange' => 'ValidateDropDwon(this)', but attribute onchange is not exist in select with id my_datepicker

So the problem is in PHP not showing onchange atribute after execution, also button html is not disabled by default, there many way to fix this problem, fix from PHP, fix from HTML, fix from JavaScript.

I will explain fix from JavaScript

Fix from JavaScript

Create javascript event on change

$('#my_datepicker').change(function () { ... }

this event is working, but now we have new problem, because button is not disabled by default, we need disable button first while page load, we can use on load event to disable button, but we can combine event load and change with this solution

I'm use jQuery 3.4.1

$(document).ready(function(){
    $('#my_datepicker').bind('change', function () {
        if($(this).val() != ''){ // if value is not empty, enable button
          $("#place_order").attr("disabled", false);
        }else{
            $("#place_order").attr("disabled", true); // if empty disable button
        }
    });
    $('#my_datepicker').trigger('change'); // event `change` on page `load`
});

Check https://jsfiddle.net/lexavey/t9oj43g6/26/ working code.