จะมั่นใจได้อย่างไรว่าฟิลด์ฟอร์ม <select> ถูกส่งเมื่อปิดการใช้งาน

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

readonlyแอตทริบิวต์จะใช้ได้เฉพาะinputและtextareaสาขา แต่ที่เป็นพื้นสิ่งที่ฉันต้องการ มีวิธีใดบ้างที่จะทำงานนี้ได้?

สองความเป็นไปได้ที่ฉันกำลังพิจารณารวมถึง:

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

<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

ไหนเป็นชื่อที่คุณตามปกติจะให้select_name<select>

ตัวเลือกอื่น

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

ขณะนี้มีหนึ่งในนี้ผมได้สังเกตเห็นว่าขึ้นอยู่กับสิ่งที่เว็บเซิร์ฟเวอร์ที่คุณกำลังใช้คุณอาจจะต้องใส่การป้อนข้อมูลทั้งก่อนหรือหลังhidden<select>

หากหน่วยความจำของฉันให้บริการฉันอย่างถูกต้องด้วย IIS คุณต้องใส่ไว้ก่อนหน้านี้ด้วย Apache ที่คุณใส่ไว้ เช่นเคยการทดสอบเป็นกุญแจสำคัญ

ปิดการใช้งานเขตข้อมูลและเปิดใช้งานก่อนที่จะส่งแบบฟอร์ม:

รหัส jQuery:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

ฉันกำลังมองหาวิธีแก้ปัญหาสำหรับเรื่องนี้และเนื่องจากฉันไม่ได้หาวิธีแก้ปัญหาในหัวข้อนี้ฉันทำของตัวเอง

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

เรียบง่ายคุณเพียงแค่เบลอเขตข้อมูลเมื่อคุณมุ่งเน้นไปที่สิ่งที่ต้องการปิดการใช้งาน แต่คุณส่งข้อมูลจริง

ฉันประสบกับสถานการณ์ที่แตกต่างออกไปเล็กน้อยซึ่งฉันเพียงต้องการที่จะไม่อนุญาตให้ผู้ใช้เปลี่ยนค่าที่เลือกตามตัวเลือกก่อนหน้านี้ สิ่งที่ฉันทำลงเอยคือการปิดใช้งานตัวเลือกอื่น ๆ ที่ไม่ได้เลือกไว้ใน selectbox โดยใช้

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

โซลูชันเดียวกันที่ Tres แนะนำโดยไม่ใช้ jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

สิ่งนี้อาจช่วยให้บางคนเข้าใจมากขึ้น แต่เห็นได้ชัดว่ายืดหยุ่นน้อยกว่า jQuery

ไม่สามารถใช้งานกับ: ตัวเลือกอินพุตสำหรับฟิลด์ที่เลือกใช้สิ่งนี้:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

ฉันใช้รหัสถัดไปสำหรับปิดการใช้งานตัวเลือกในการเลือก

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

วิธีที่ง่ายที่สุดที่ฉันพบคือการสร้างฟังก์ชั่นจาวาสคริปต์เล็ก ๆ ที่เชื่อมโยงกับแบบฟอร์มของคุณ:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

และคุณเรียกมันในแบบฟอร์มของคุณที่นี่:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

หรือคุณสามารถเรียกมันในฟังก์ชั่นที่คุณใช้ตรวจสอบแบบฟอร์มของคุณ :)

เพียงเพิ่มบรรทัดก่อนส่ง

$ ( "# XYZ") removeAttr ( "คนพิการ.");

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

ฉันเพิ่มปลั๊กอินด่วน (Jquery เท่านั้น) ที่บันทึกค่าในเขตข้อมูลในขณะที่อินพุตถูกปิดใช้งาน นี่หมายความว่าตราบใดที่ฟิลด์ถูกปิดใช้งานโดยทางโปรแกรมผ่าน jquery โดยใช้. prop () หรือ .attr () ... จากนั้นการเข้าถึงค่าโดย. val (), .serialize () หรือ .serializeArra () จะส่งคืนค่าเสมอ ค่าแม้ว่าจะปิดการใช้งาน :)

ปลั๊กไร้ยางอาย: https://github.com/Jezternz/jq-disabled-inputs

ขึ้นอยู่กับวิธีแก้ปัญหาของจอร์แดนฉันสร้างฟังก์ชันที่สร้างอินพุตที่ซ่อนโดยอัตโนมัติด้วยชื่อเดียวกันและค่าเดียวกันของตัวเลือกที่คุณต้องการให้ไม่ถูกต้อง พารามิเตอร์แรกสามารถเป็น id หรือองค์ประกอบ jquery; ที่สองคือพารามิเตอร์ทางเลือกบูลีนที่ "จริง" ปิดการใช้งานและ "เท็จ" เปิดใช้งานการป้อนข้อมูล หากไม่ระบุพารามิเตอร์ที่สองจะสลับการเลือกระหว่าง "เปิดใช้งาน" และ "ปิดใช้งาน"

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

ฉันพบวิธีแก้ปัญหาที่ใช้การได้: ลบองค์ประกอบทั้งหมดยกเว้นที่เลือกไว้ จากนั้นคุณสามารถเปลี่ยนสไตล์เป็นสิ่งที่ปิดการใช้งานได้เช่นกัน ใช้ jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

ตัวเลือกอื่นคือการใช้คุณลักษณะอ่านอย่างเดียว

<select readonly="readonly">
    ....
</select>

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

แก้ไข:

อ้างถึงจากhttp://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

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

เมื่อมันบอกว่าองค์ประกอบอาจจะประสบความสำเร็จก็หมายความว่ามันอาจจะส่งตามที่ระบุไว้ที่นี่: http://www.w3.org/TR/html401/interact/forms.html#successful-controls