如何让 $.serialize() 考虑到那些禁用的 :input 元素？答案

【问题标题】：How do I make $.serialize() take into account those disabled :input elements?如何让 $.serialize() 考虑到那些禁用的 :input 元素？
【发布时间】：2011-06-12 12:42:28
【问题描述】：

默认情况下，$.serialize() 似乎忽略了禁用的输入元素。有解决办法吗？

【问题讨论】：

更奇怪的是，你可以序列化一个禁用的textarea，但不能序列化一个禁用的input..

标签： jquery serialization

【解决方案1】：

暂时启用它们。

var myform = $('#myform');

 // Find disabled inputs, and remove the "disabled" attribute
var disabled = myform.find(':input:disabled').removeAttr('disabled');

 // serialize the form
var serialized = myform.serialize();

 // re-disabled the set of inputs that you previously enabled
disabled.attr('disabled','disabled');

【讨论】：

值得考虑 readonly 而不是 disabled 如下 Andrew 所述。
原因如下：“只有“成功的控件”才会序列化为字符串。” - w3.org/TR/html401/interact/forms.html#h-17.13.2

【解决方案2】：

使用只读输入而不是禁用输入：

<input name='hello_world' type='text' value='hello world' readonly />

这应该被 serialize() 拾取。

【讨论】：

太好了，请注意：提交按钮在只读状态下仍然可以点击。
disabled 阻止序列化，但 readonly 阻止验证
readonly 的另一个问题 - 不适用于复选框。与他们一起使用一个类加上一个更改事件：jQuery( document ).on("change", ".disablethis", function(e) { e.preventDefault(); this.checked = !this.checked; });

【解决方案3】：

您可以使用代理函数（它同时影响$.serializeArray() 和$.serialize()）：

(function($){
    var proxy = $.fn.serializeArray;
    $.fn.serializeArray = function(){
        var inputs = this.find(':disabled');
        inputs.prop('disabled', false);
        var serialized = proxy.apply( this, arguments );
        inputs.prop('disabled', true);
        return serialized;
    };
})(jQuery);

【讨论】：

最佳解决方案，适用于选择、复选框、单选、隐藏和禁用输入

【解决方案4】：

@user113716 提供了核心答案。我在这里的贡献只是通过添加一个函数来实现 jQuery：

/**
 * Alternative method to serialize a form with disabled inputs
 */
$.fn.serializeIncludeDisabled = function () {
    let disabled = this.find(":input:disabled").removeAttr("disabled");
    let serialized = this.serialize();
    disabled.attr("disabled", "disabled");
    return serialized;
};

示例用法：

$("form").serializeIncludeDisabled();

【讨论】：

【解决方案5】：

试试这个：

<input type="checkbox" name="_key" value="value"  disabled="" />
<input type="hidden" name="key" value="value"/>

【讨论】：

您能否详细说明一下并向 OP 解释为什么这样有效？
我可以为你解释。如果您仍然想要禁用输入字段（无论出于何种原因），但您还想使用 serialize() 方法发送输入名称。然后，您可以使用隐藏的输入字段（与禁用的输入字段具有相同的值），serialize() 不会忽略该字段。然后，您还可以保留禁用的输入字段以保持可见性。

【解决方案6】：

我可以看到一些解决方法，但仍然没有人建议编写自己的序列化函数？给你：https://jsfiddle.net/Lnag9kbc/

var data = [];

// here, we will find all inputs (including textareas, selects etc)
// to find just disabled, add ":disabled" to find()
$("#myform").find(':input').each(function(){
    var name = $(this).attr('name');
    var val = $(this).val();
    //is name defined?
    if(typeof name !== typeof undefined && name !== false && typeof val !== typeof undefined)
    {
        //checkboxes needs to be checked:
        if( !$(this).is("input[type=checkbox]") || $(this).prop('checked'))
            data += (data==""?"":"&")+encodeURIComponent(name)+"="+encodeURIComponent(val);
    }
});

【讨论】：

【解决方案7】：

禁用的输入元素不会被序列化，因为“禁用”意味着根据 W3C 标准不应使用它们。 jQuery 只是遵守标准，尽管有些浏览器不遵守。您可以通过添加一个值与禁用字段相同的隐藏字段来解决此问题，或者通过 jQuery 执行此操作，如下所示：

$('#myform').submit(function() {
  $(this).children('input[hiddeninputname]').val($(this).children('input:disabled').val());
  $.post($(this).attr('url'), $(this).serialize, null, 'html');
});

显然，如果您有多个禁用输入，则必须遍历匹配的选择器等。

【讨论】：

【解决方案8】：

如果有人不想激活它们，然后再次禁用它们，你也可以尝试这样做（我从 Disabled fields not picked up by serializeArray 修改它，从使用插件到使用普通功能）：

function getcomment(item)
{
  var data = $(item).serializeArray();
  $(':disabled[name]',item).each(function(){
    data.push({name: item.name,value: $(item).val()});
  });
  return data;
}

所以你可以这样称呼他们：

getcomment("#formsp .disabledfield");

【讨论】：

我试过你的函数，它不会产生元素名称或值。请参见下面的示例； code 3：{名称：未定义，值：“”} 4：{名称：未定义，值：“”}

【解决方案9】：

刚刚超过 Aaron Hudon：

也许你有其他输入而不是输入（如选择），所以我改变了

this.find(":input:disabled")

到

this.find(":disabled")

【讨论】：