jQuery动态添加控件未传递到控制器的问题及相关疑问

首先明确说：jQuery完全适合用来完成动态添加表单控件的任务，你根本不需要改用jQuery来提交表单——问题的核心不在提交方式，而是你新增的所有input元素都加了disabled属性！

为什么值不会被提交？ #

浏览器在处理表单提交时，会自动忽略所有带有disabled属性的表单控件——不管是页面初始化时就存在的，还是通过JS动态添加的，它们的值都不会被包含在提交的请求参数里。这是HTML表单的原生规则，和jQuery无关。

两种修复方案 #

根据你的需求，有两种常用的解决思路：

方案一：用readonly替代disabled

如果你只是想让用户无法编辑输入框，但需要它的值被正常提交，把disabled换成readonly就可以了。修改你的jQuery代码里的input部分：

$('#shopsTable').append('<tr id="row-' + row + '">' +
    '<td><input readonly type="text" class="form-control" name="shop['+ row +'][name]" value="'+ storeName +'"></td>' +
    '<td><input readonly type="text" class="form-control" name="shop['+ row +'][url]" value="'+ url +'"/></td>' +
    '<td><input readonly type="number" class="form-control" name="shop['+ row +'][price]" value="'+ price +'"/></td>' +
    '<td><button type="button" class="btn btn-danger">remove</button></td>' +
    '</tr>');

顺便提一句：你之前所有行都用了同一个id="row"，这不符合DOM元素id唯一的规则，我改成了row-' + row + '来避免冲突，建议你把原有模板里的行id也统一调整下。

方案二：保留disabled视觉效果，搭配隐藏域

如果你必须保留disabled带来的灰色不可编辑样式，可以在每个disabled输入框旁边添加对应的隐藏input，把相同的name和值赋给隐藏域，这样提交时会发送隐藏域的值：

$('#shopsTable').append('<tr id="row-' + row + '">' +
    '<td>' +
        '<input disabled type="text" class="form-control" value="'+ storeName +'">' +
        '<input type="hidden" name="shop['+ row +'][name]" value="'+ storeName +'">' +
    '</td>' +
    '<td>' +
        '<input disabled type="text" class="form-control" value="'+ url +'"/>' +
        '<input type="hidden" name="shop['+ row +'][url]" value="'+ url +'">' +
    '</td>' +
    '<td>' +
        '<input disabled type="number" class="form-control" value="'+ price +'"/>' +
        '<input type="hidden" name="shop['+ row +'][price]" value="'+ price +'">' +
    '</td>' +
    '<td><button type="button" class="btn btn-danger">remove</button></td>' +
    '</tr>');

这种方式用户看到的是不可编辑的输入框，但实际提交的是隐藏域的内容，完美兼顾样式和功能。

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