我如何使 $. seralize()考虑到那些禁用的: input 元素？

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

68077 次浏览
小开
最佳答案

暂时启用它们。

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');
小开

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

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

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

小开

使用只读输入，而不是禁用输入:

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

序列化()应该能够识别这一点。

小开

可以使用代理函数(它同时影响 $.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);
小开

试试这个:

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

我可以看到一些变通方法，但仍然没有人建议编写自己的序列化函数

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);
}
});
小开

@ 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();
小开

如果有人不想激活它们，然后再次禁用它们，你也可以尝试这样做(我从 禁用的字段没有被 seralizeArray 拾取修改了它，从使用插件到使用普通函数) :

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");
小开

就在亚伦 · 哈登上方:

也许除了 Input (比如 select)之外还有其他东西，所以我改变了

this.find(":input:disabled")

到

this.find(":disabled")

提交答案