如何使$ .serialize()考虑那些禁用的:input元素?


135

似乎默认情况下禁用的输入元素被忽略$.serialize()。有解决方法吗?


这甚至很奇怪,因为您可以序列化一个已禁用textarea但不能被禁用的序列input..
daVe

Answers:


233

暂时启用它们。

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

26
值得考虑,readonly而不是disabled下面安德鲁提到的。
andilabs 2014年

93

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

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

这应该由serialize()来处理。


太好了,仅需注意:只读时,提交按钮仍可单击。
安德烈Chalella

3
禁用可防止序列化,但只读可防止验证
Jeff Lowery

11

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

最佳解决方案,适用于选择,复选框,广播,隐藏和禁用输入
Plasebo

9

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

4

试试这个:

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

您能否再详细说明一下,并向OP解释为什么这样做有效?
威廉姆德(Willem Mulder)

我可以为您解释。如果您仍然想要禁用输入字段(无论出于何种原因),但是您也想使用serialize()方法发送输入名称。然后,您可以使用隐藏的输入字段(与禁用的输入字段具有相同的值),而serialize()不会忽略该字段。然后,您还可以保留禁用的输入字段以获取可见性。
superkytoz 2014年

3

我可以看到一些解决方法,但是仍然没有人建议编写自己的序列化函数?在这里,您可以前往: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);
    }
});

2

禁用的输入元素不会被序列化,因为按照W3C标准,“禁用”意味着不应使用它们。jQuery仅遵守该标准,即使某些浏览器没有这样做。您可以解决此问题,方法是添加一个隐藏字段(其值与禁用字段的值相同),或者通过jQuery这样做,如下所示:

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

显然,如果您有多个禁用的输入,则必须迭代匹配的选择器等。


1

如果有人不想激活它们,然后再次禁用它们,您也可以尝试执行此操作(我从serializeArray未选择的Disabled字段中进行了修改,从使用插件到使用常规功能):

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

1
我尝试了您的函数,但它不会产生元素名称或值。参见下面的例子;code 3:{name:undefined,value:“”} 4:{name:undefined,value:“”}
blackmambo

0

就在Aaron Hudon上:

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

this.find(":input:disabled")

this.find(":disabled")
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.