为何禁用的input无法提交值？select禁用提交问题解答

一、禁用（disabled）控件无法提交值的原因 #

HTML规范明确规定：带有disabled属性的表单控件不会被包含在表单提交的数据集合中，浏览器会直接忽略这类控件的参数传递。你遇到的“field_name is required”错误，本质是服务器端校验要求该字段必须有值，但浏览器根本没把禁用控件的数据传过去，导致服务器接收不到有效值，触发必填校验失败。

二、input禁用后提交值的解决方案 #

如果需要控件保持不可编辑状态，但又要让值能提交到服务器，别用disabled，改用以下两种方式：

1. 使用readonly属性 #

将disabled替换为readonly，控件会变成只读状态（用户无法修改内容），但表单提交时会正常携带它的值：

<input readonly type="number" name="qty[]" id="qty_1" class="form-control" min="0" placeholder="Quantity" required onclick="getTotal(1)" onkeyup="getTotal(1)">

注意：readonly仅对文本类输入控件（如input、textarea）生效，select控件不支持该属性。

2. 隐藏域配合禁用控件 #

如果必须保留disabled的视觉禁用样式，可以添加一个同名的隐藏输入框，把需要提交的值存入隐藏域：

<!-- 禁用的可视化控件，仅用于展示 -->
<input disabled type="number" name="qty[]" id="qty_1" class="form-control" min="0" placeholder="Quantity" value="10" onclick="getTotal(1)" onkeyup="getTotal(1)">
<!-- 同名隐藏域，负责提交值到服务器 -->
<input type="hidden" name="qty[]" value="10">

这种方式下，浏览器会提交隐藏域的值，同时用户看到的是禁用状态的输入框。

三、select控件禁用后的提交处理 #

select控件不支持readonly，要实现“不可修改但能提交值”的需求，有两种可行方案：

1. 禁用整个select+添加隐藏域 #

和input的处理逻辑一致，给禁用的select搭配一个同名隐藏域：

<!-- 禁用的select，用于展示选中值 -->
<select disabled class="form-control select_group product" data-row-id="row_<?php echo $x; ?>" id="product_<?php echo $x; ?>" name="product[]" style="width:100%" onchange="getProductData(<?php echo $x; ?>)" required>
  <option value=""></option>
  <?php foreach ($products as $k => $v): ?>
  <option value="<?php echo $v['id'] ?>" <?php if($val['product_id'] == $v['id']) { echo "selected='selected'"; } ?>><?php echo $v['name'] ?></option>
  <?php endforeach ?>
</select>
<!-- 同名隐藏域，提交选中的产品ID -->
<input type="hidden" name="product[]" value="<?php echo $val['product_id']; ?>">

2. 禁用未选中的option #

保留select的可交互状态，但禁用除当前选中项之外的所有选项，用户无法切换选项，同时表单提交时会正常传递选中值：

<select class="form-control select_group product" data-row-id="row_<?php echo $x; ?>" id="product_<?php echo $x; ?>" name="product[]" style="width:100%" onchange="getProductData(<?php echo $x; ?>)" required>
  <option value=""></option>
  <?php foreach ($products as $k => $v): ?>
  <option value="<?php echo $v['id'] ?>" 
    <?php if($val['product_id'] == $v['id']) { echo "selected='selected'"; } ?>
    <?php if($val['product_id'] != $v['id']) { echo "disabled"; } ?>
  ><?php echo $v['name'] ?></option>
  <?php endforeach ?>
</select>

这种方式下，用户能看到select控件，但只能查看当前选中项，其他选项呈灰色不可选状态，提交时参数正常传递。

内容的提问来源于stack exchange，提问作者wloleo