ฉันจะทำให้ $ .serialize () คำนึงถึงสิ่งที่ปิดใช้งาน: องค์ประกอบอินพุตได้อย่างไร

$.serialize()ดูเหมือนว่าโดยองค์ประกอบของการป้อนข้อมูลคนพิการเริ่มต้นจะถูกละเลยโดย มีวิธีแก้ปัญหาหรือไม่?

เปิดใช้งานชั่วคราว

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

ใช้อินพุตแบบอ่านอย่างเดียวแทนอินพุตที่ปิดใช้งาน:

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

สิ่งนี้ควรได้รับการเลือกโดย serialize ()

คุณสามารถใช้ฟังก์ชัน proxied (มีผลต่อทั้ง$.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);

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

ลองสิ่งนี้:

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

ฉันเห็นวิธีแก้ปัญหาเล็กน้อย แต่ยังไม่มีใครแนะนำให้เขียนฟังก์ชันการทำให้เป็นอนุกรมของคุณเอง ได้ที่นี่: 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);
    }
});

องค์ประกอบอินพุตที่ปิดใช้งานจะไม่ได้รับการต่ออนุกรมเนื่องจาก 'ปิดใช้งาน' หมายความว่าไม่ควรใช้ตามมาตรฐาน W3C jQuery ปฏิบัติตามมาตรฐานแม้ว่าบางเบราว์เซอร์จะไม่ทำก็ตาม คุณสามารถหลีกเลี่ยงสิ่งนี้ได้โดยการเพิ่มฟิลด์ที่ซ่อนไว้ซึ่งมีค่าเหมือนกับฟิลด์ที่ปิดใช้งานหรือทำสิ่งนี้ผ่าน jQuery สิ่งนี้:

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

เห็นได้ชัดว่าหากคุณมีอินพุตที่ปิดใช้งานมากกว่าหนึ่งรายการคุณจะต้องทำซ้ำบนตัวเลือกที่ตรงกันเป็นต้น

ในกรณีที่มีคนไม่ต้องการเปิดใช้งานจากนั้นปิดการใช้งานอีกครั้งคุณสามารถลองทำสิ่งนี้ได้ (ฉันแก้ไขจากช่องที่ปิดใช้งานไม่ได้รับโดย 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");

เหนือ Aaron Hudon:

บางทีคุณอาจมีอย่างอื่นที่ไม่ใช่ Input (เช่น select) ฉันจึงเปลี่ยนไป

this.find(":input:disabled")

ถึง

this.find(":disabled")