在 woocommerce 自定义结账字段中，可通过为 select 元素的首个 option 添加 disabled 属性（服务端 php 或客户端 jquery 均可实现），使其显示为灰色且无法被选中，同时保留其作为默认提示项的功能。
在 woocommerce 自定义结账字段中，可通过为 select 元素的首个 option 添加 disabled 属性（服务端 php 或客户端 jquery 均可实现），使其显示为灰色且无法被选中，同时保留其作为默认提示项的功能。
要使 WooCommerce 结账页中通过 woocommerce_form_field() 生成的下拉框（type => 'select'）首项（如“Selecteer”）不可选但依然可见，推荐两种可靠方案：
✅ 方案一：服务端 PHP —— 利用 WooCommerce 内置支持（推荐）
自 WooCommerce 3.4+ 起，woocommerce_form_field() 支持为单个 option 指定 HTML 属性（包括 disabled）。只需将首项值改为带属性的数组格式：
woocommerce_form_field( 'cstm_leeftijd'.$i, array(
'type' => 'select',
'class' => array('my-field-class form-row-first'),
'label' => __('Leeftijd bij start Summer Camp'),
'required' => true,
'options' => array(
'blank' => array(
'value' => '', // 实际提交值为空字符串
'label' => __('Selecteer', 'njengah'),
'disabled' => true, // ? 关键：禁用此项
'hidden' => false
),
'4' => __( '4', 'njengah' ),
'5' => __( '5', 'njengah' ),
'6' => __( '6', 'njengah' ),
'7' => __( '7', 'njengah' ),
'8' => __( '8', 'njengah' ),
'9' => __( '9', 'njengah' ),
'10' => __( '10', 'njengah' ),
'11' => __( '11', 'njengah' ),
),
), $checkout->get_value( 'cstm_leeftijd'.$i ));
⚠️ 注意：此写法要求选项键（如 'blank'）对应一个关联数组而非纯字符串；WooCommerce 会自动渲染为 。
✅ 方案二：客户端 jQuery —— 兼容旧版本或快速补救
若主题或插件环境受限（如 WooCommerce 版本较低），可在页面加载后通过 jQuery 禁用首项：
<script>
jQuery(document).ready(function($) {
// 针对所有含 class="my-field-class" 的 select 的第一个 option
$('.my-field-class select option:first').prop('disabled', true);
// 可选：确保默认不选中该禁用项（增强兼容性）
$('.my-field-class select').val('');
});
</script>
? 重要提醒：
- 仅设 disabled 不足以保证表单校验逻辑——务必配合 'required' => true（已启用），WooCommerce 会拒绝提交空值；
- 若首项 value 为非空字符串（如 'blank'），请将其改为 ''，避免意外提交无效值；
- 禁用项仍会显示在下拉菜单中，但用户无法点击选中，符合 UX 最佳实践（提示 + 强制选择）。
综上，优先采用 PHP 方案（语义清晰、服务端可控、无 JS 依赖）；jQuery 方案可作为轻量级兜底策略。
