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

debugcn 发表于 Dev

奥米德·托拉比（Omid Toraby）

我已经将选择自定义字段添加到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;
}

});

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

Lexa Vey

确保调用了函数

添加console.log('Im call ValidateDropDwon')内部函数，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 ValidateDropDwon在浏览器控制台中看到。

根据您的问题，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)',但onchangeid为select的属性不存在my_datepicker

因此，问题在于PHP在执行后未显示onchange属性，默认情况下也不禁用html按钮，有很多方法可以解决此问题，从PHP修复，从HTML修复，从JavaScript修复。

我将解释JavaScript的修复

通过JavaScript修复

更改时创建JavaScript事件

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

此事件的工作，但现在我们有新的问题，因为按钮是不是默认是禁用的，我们首先需要禁用按钮，同时页面加载，我们可以利用load事件来关闭按钮，但我们可以结合事件load，并change用此解决方案

我正在使用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/工作代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。