如果未选择自定义选择字段，则禁用 woocommerce 下订单按钮

Question

我已将选择自定义字段添加到 woocommerce 结帐页面：

// 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>';
     
    
}

并使用此 jQuery 检查是否选择了一项选择字段，然后启用“下订单”按钮：

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

});

但它不起作用，“下订单”按钮始终处于活动状态！我真的不知道为什么它不起作用！？

Answer 1

确保函数被调用

在函数ValidateDropDwon 中添加console.log('Im call ValidateDropDwon')，然后重新加载您的页面。

例如：

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

按F12打开浏览器控制台，在浏览器控制台中看到Im call ValidateDropDwonshowing。

根据您的问题，未调用函数ValidateDropDwon。

检查 HTML 输出

让我们检查 PHP 的 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>

下单按钮输出

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

看，你的 PHP 有 'onchange' => 'ValidateDropDwon(this)',，但属性 onchange 在 ID 为 my_datepicker 的选择中不存在

所以问题在于 PHP 在执行后没有显示 onchange 属性，并且按钮 html 默认没有被禁用，有很多方法可以解决这个问题，从 PHP 修复，从 HTML 修复，从 JavaScript 修复。

我将从 JavaScript 解释修复

从 JavaScript 修复

在更改时创建 javascript 事件

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

这个事件正在工作，但现在我们有新问题，因为按钮默认禁用，我们需要在页面加载时先禁用按钮，我们可以在load事件上使用来禁用按钮，但我们可以将事件load 和change 与this 解决方案结合起来

我使用的是 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`
});

检查https://jsfiddle.net/lexavey/t9oj43g6/26/工作代码。