ค่าของอินพุตที่ปิดใช้งานจะไม่ถูกส่ง

นี่คือสิ่งที่ฉันพบโดย Firebug ใน Firefox

มันเหมือนกันในเบราว์เซอร์อื่นหรือไม่?

ถ้าเป็นเช่นนั้นอะไรคือสาเหตุของสิ่งนี้

ใช่เบราว์เซอร์ทั้งหมดไม่ควรส่งอินพุตที่ปิดใช้งานเนื่องจากเป็นแบบอ่านอย่างเดียว

ข้อมูลเพิ่มเติม (ส่วน 17.12.1)

นิยามคุณสมบัติ

ปิดใช้งาน [CI] เมื่อตั้งค่าสำหรับการควบคุมฟอร์มแอตทริบิวต์ Boolean นี้จะปิดใช้งานการควบคุมสำหรับการป้อนข้อมูลผู้ใช้ เมื่อตั้งค่าแล้วแอททริบิวต์ที่ปิดใช้งานจะมีผลต่อองค์ประกอบดังนี้:

• ตัวควบคุมที่ปิดใช้งานไม่ได้รับการโฟกัส
• ตัวควบคุมที่ปิดใช้งานถูกข้ามในการนำทางแบบแท็บ
• การควบคุมที่ปิดใช้งานไม่สามารถทำได้สำเร็จ

องค์ประกอบต่อไปนี้สนับสนุนคุณลักษณะที่ปิดใช้งาน: BUTTON, INPUT, OPTGROUP, OPTION, SELECT และ TEXTAREA

คุณลักษณะนี้ได้รับการสืบทอด แต่การประกาศในท้องถิ่นจะแทนที่ค่าที่สืบทอด

วิธีการแสดงองค์ประกอบที่ถูกปิดใช้งานขึ้นอยู่กับตัวแทนผู้ใช้ ตัวอย่างเช่นตัวแทนผู้ใช้บางรายการ "เป็นสีเทา" ปิดใช้งานรายการเมนูป้ายชื่อปุ่ม ฯลฯ

ในตัวอย่างนี้องค์ประกอบ INPUT ถูกปิดใช้งาน ดังนั้นจึงไม่สามารถรับอินพุตของผู้ใช้ได้และจะไม่ส่งค่าของมันพร้อมกับแบบฟอร์ม

<INPUT disabled name="fred" value="stone">

บันทึก. วิธีเดียวในการแก้ไขค่าของแอททริบิวต์ที่ปิดใช้งานคือการใช้สคริปต์

disabled อินพุตจะไม่ส่งข้อมูล

ใช้readonlyคุณลักษณะ:

<input type="text" readonly />

แหล่งที่มาที่นี่

คุณสามารถใช้สามสิ่งในการเลียนแบบการปิดการใช้งาน:

1. HTML: readonlyคุณลักษณะ (เพื่อให้ค่าปัจจุบันในอินพุตสามารถนำมาใช้ในการส่งแบบฟอร์มนอกจากนี้ผู้ใช้ไม่สามารถเปลี่ยนค่าอินพุต)

2. CSS: 'pointer-events':'none'(บล็อกผู้ใช้จากการคลิกอินพุต)

3. HTML: tabindex="-1"(บล็อกผู้ใช้เพื่อนำทางไปยังอินพุตจากแป้นพิมพ์)

พวกเขาไม่ได้ส่งเพราะนั่นคือสิ่งที่มันพูดว่าในข้อกำหนดของ W3C

17.13.2 การควบคุมที่ประสบความสำเร็จ

การควบคุมที่ประสบความสำเร็จคือ "ถูกต้อง" สำหรับการส่ง [snip]

• การควบคุมที่ถูกปิดใช้งานไม่สามารถทำได้สำเร็จ

กล่าวอีกนัยหนึ่งสเปคบอกว่าการควบคุมที่ถูกปิดใช้งานนั้นถือว่าไม่ถูกต้องและไม่ควรส่ง

Disabledการควบคุมไม่สามารถทำได้สำเร็จและการควบคุมที่สำเร็จคือ "ถูกต้อง" สำหรับการส่ง นี่คือเหตุผลที่การควบคุมที่ปิดใช้งานไม่ได้ส่งมาพร้อมกับแบบฟอร์ม

มีสองคุณสมบัติคือreadonlyและdisabledที่สามารถทำให้การป้อนข้อมูลแบบอ่านอย่างเดียว แต่มีความแตกต่างเล็กน้อยระหว่างพวกเขา

<input type="text" readonly />
<input type="text" disabled />

• readonlyแอตทริบิวต์ทำให้ป้อนข้อความของคุณคนพิการและผู้ใช้จะไม่สามารถที่จะเปลี่ยนมันอีกต่อไป
• ไม่เพียง แต่จะdisabledแอตทริบิวต์ทำให้การป้อนข้อความของคุณปิดการใช้งาน (ไม่เปลี่ยนแปลง) แต่ยังไม่สามารถที่จะส่ง

วิธีการ jQuery (1):

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

วิธีการ jQuery (2):

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

วิธี JavaScript:

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS disabledและreadonlyเป็นแอตทริบิวต์ html มาตรฐาน นำมาใช้กับpropjQuery 1.6

การควบคุมการเลือกยังคงสามารถคลิกได้แม้จะอยู่บน Attrib แบบอ่านอย่างเดียว

ถ้าคุณต้องการที่จะปิดการใช้งานการควบคุม แต่คุณต้องการโพสต์ค่าของมัน คุณอาจลองสร้างเขตข้อมูลที่ซ่อนอยู่ ด้วยค่าเดียวกันกับการควบคุมของคุณ

จากนั้นสร้าง jquery เมื่อเลือกการเปลี่ยนแปลง

$('#your_select_id').change(function () {
    $('#your_hidden_selectid').val($('#your_select_id').val());
});