รูปแบบ HTML เลือกแท็ก / อินพุตแบบอ่านอย่างเดียว

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

ปัญหาเดียวคืออินพุตของฟอร์ม HTML ที่ปิดใช้งานจะไม่รวมอยู่ในข้อมูล POST / GET

วิธีที่ดีที่สุดในการเลียนแบบreadonlyคุณลักษณะของselectแท็กคืออะไรและยังคงได้รับข้อมูล POST

คุณควรเก็บselectองค์ประกอบไว้disabledแต่เพิ่มส่วนที่ซ่อนไว้inputด้วยชื่อและค่าเดียวกัน

หากคุณเปิดใช้งาน SELECT อีกครั้งคุณควรคัดลอกค่าไปยังอินพุตที่ซ่อนอยู่ในเหตุการณ์ onchange และปิดใช้งาน (หรือลบ) อินพุตที่ซ่อนอยู่

นี่คือตัวอย่าง:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

เราสามารถใช้สิ่งนี้ได้

ปิดใช้งานทั้งหมดยกเว้นตัวเลือกที่เลือก:

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

วิธีนี้ดรอปดาวน์ยังคงใช้งานได้ (และส่งค่า) แต่ผู้ใช้ไม่สามารถเลือกค่าอื่นได้

การสาธิต

คุณสามารถเปิดใช้งานวัตถุที่เลือกเมื่อส่ง

แก้ไข : คือโดยปกติจะปิดใช้งานแท็กเลือก (โดยมีแอตทริบิวต์ที่ปิดใช้งาน) แล้วเปิดใช้งานใหม่โดยอัตโนมัติก่อนส่งแบบฟอร์ม:

ตัวอย่างด้วย jQuery:

• หากต้องการปิดใช้งาน:

  $('#yourSelect').prop('disabled', true);

• หากต้องการเปิดใช้งานใหม่ก่อนส่งเพื่อให้มีข้อมูล GET / POST รวมอยู่:

  $('#yourForm').on('submit', function() {
      $('#yourSelect').prop('disabled', false);
  });

นอกจากนี้คุณสามารถเปิดใช้งานอินพุตที่ปิดใช้งานใหม่ทั้งหมดหรือเลือก:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

อีกวิธีในการทำreadOnlyแอตทริบิวต์ให้กับselectองค์ประกอบคือการใช้css

คุณสามารถทำเช่น:

$('#selection').css('pointer-events','none');

การสาธิต

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

ผ่านการทดสอบและทำงานใน IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Safari 3.2.1 สำหรับ Windows และ Google Chrome

วิธีแก้ปัญหา jQuery อย่างง่าย

ใช้สิ่งนี้หากสิ่งที่คุณเลือกมีreadonlyคลาส

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

หรือสิ่งนี้หากการเลือกของคุณมีreadonly="readonly"แอตทริบิวต์

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

โซลูชัน CSS อย่างง่าย:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

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

อีกตัวเลือกร่วมสมัยมากขึ้น (ไม่ตั้งใจเล่นสำนวน) คือการปิดการใช้งานตัวเลือกทั้งหมดขององค์ประกอบที่เลือกอื่น ๆ จากนั้นเลือกหนึ่ง

โปรดทราบว่านี่เป็นคุณลักษณะ HTML 4.0 และนั่นคือ 6,7,8 beta 1 ดูเหมือนจะไม่เคารพสิ่งนี้

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

นี่เป็นทางออกที่ดีที่สุดที่ฉันได้พบ:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

รหัสด้านบนปิดใช้งานตัวเลือกอื่น ๆ ทั้งหมดที่ไม่ได้เลือกในขณะที่เปิดใช้งานตัวเลือกที่เลือกไว้ การทำเช่นนั้นตัวเลือกที่เลือกจะทำให้มันเป็นข้อมูลหลังโพสต์

ฉันรู้ว่ามันสายเกินไป แต่ก็สามารถทำได้ด้วย CSS ง่าย:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

สไตล์จะซ่อนตัวเลือกและกลุ่มทั้งหมดเมื่อการเลือกอยู่ในreadonlyสถานะดังนั้นผู้ใช้จะไม่สามารถเปลี่ยนการเลือกได้

ไม่ต้องการแฮ็ค JavaScript

ยังง่ายกว่า: เพิ่มแอตทริบิวต์สไตล์ให้กับแท็กที่คุณเลือก :

style="pointer-events: none;"

นี่คือทางออกที่ง่ายที่สุดและดีที่สุด คุณจะตั้งค่า readolny attr บนตัวเลือกของคุณหรือ attr อื่น ๆ เช่น data-readonly และทำดังต่อไปนี้

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

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

// global variable to store original event/handler for save button
var form_save_button_func = null;

// function to get jQuery object for save button
function get_form_button_by_id(button_id) {
    return jQuery("input[type=button]#"+button_id);
}

// alter value of disabled element
function set_disabled_elem_value(elem_id, value)  {
    jQuery("#"+elem_id).removeAttr("disabled");
    jQuery("#"+elem_id).val(value);
    jQuery("#"+elem_id).attr('disabled','disabled');
}

function set_form_bottom_button_save_custom_code_generic(msg) {
    // save original event/handler that was either declared
    // through javascript or html onclick attribute
    // in a global variable
    form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.6
    //form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.7

    // unbind original event/handler (can use any of following statements below)
    get_form_button_by_value('BtnSave').unbind('click');
    get_form_button_by_value('BtnSave').removeAttr('onclick');

    // alternate save code which also calls original event/handler stored in global variable
    get_form_button_by_value('BtnSave').click(function(event){
        event.preventDefault();
        var confirm_result = confirm(msg);
        if (confirm_result) {
            if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
                jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
            }

            // disallow further editing of fields once save operation is underway
            // by making them readonly
            // you can also disallow form editing by showing a large transparent
            // div over form such as loading animation with "Saving" message text
            jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');

            // now execute original event/handler
            form_save_button_func();
        }
    });
}

$(document).ready(function() {
    // if you want to define save button code in javascript then define it now

    // code below for record update
    set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
    // code below for new record
    //set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");

    // start disabling elements on form load by also adding a class to identify disabled elements
    jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');

    set_disabled_elem_value('phone', '123121231');
    set_disabled_elem_value('fax', '123123123');
    set_disabled_elem_value('country', 'Pakistan');
    set_disabled_elem_value('address', 'address');

}); // end of $(document).ready function

นอกเหนือจากการปิดใช้งานตัวเลือกที่ไม่ควรเลือกได้ฉันต้องการทำให้พวกเขาหายไปจากรายการ แต่ยังคงสามารถเปิดใช้งานตัวเลือกเหล่านี้ได้ฉันควรจะต้องทำในภายหลัง:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

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

เป็นสิ่งสำคัญที่จะต้องแยกเคียวรี jquery เป็น 2 เพื่อเหตุผลด้านประสิทธิภาพเนื่องจาก jquery อ่านจากขวาไปซ้ายโค้ด:

$("select[readonly] option:not(:selected)")

จะพบตัวเลือกที่ไม่ได้เลือกทั้งหมดในเอกสารก่อนจากนั้นกรองตัวเลือกที่อยู่ภายในด้วยแอตทริบิวต์แบบอ่านอย่างเดียว

วิธีฝั่งเซิร์ฟเวอร์อย่างง่ายวิธีหนึ่งคือการลบตัวเลือกทั้งหมดยกเว้นตัวเลือกที่คุณต้องการเลือก ดังนั้นใน Zend Framework 1.12 ถ้า $ element เป็น Zend_Form_Element_Select:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

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

หลังจากการเปลี่ยนแปลงใด ๆ ในคุณสมบัติแบบอ่านอย่างเดียวขององค์ประกอบ

$('select.readonly option:not(:selected)').attr('disabled',true);

$('select:not([readonly]) option').removeAttr('disabled');

วิธีแก้ปัญหาด้วย tabindex ทำงานร่วมกับการเลือก แต่ยังป้อนข้อความ

เพียงใช้คลาสที่ปิดใช้งาน

CSS:

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

JS:

$(".disabled").attr("tabindex", "-1");

HTML:

<select class="disabled">
    <option value="0">0</option>
</select>

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

แก้ไข: ด้วย Internet Explorer คุณต้องมี JS นี้:

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

ติดตามจากคำแนะนำของ Grant Wagners; นี่คือข้อมูลโค้ด jQuery ที่ใช้กับฟังก์ชั่นตัวจัดการแทนแอททริบิวต์ onXXX โดยตรง:

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

ฉันแก้ไขด้วย jquery:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

หากคุณกำลังใช้การตรวจสอบ jquery คุณสามารถทำสิ่งต่อไปนี้ได้ฉันใช้แอททริบิวต์ที่ปิดใช้งานโดยไม่มีปัญหา:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

สิ่งที่ฉันพบว่าใช้งานได้ดีด้วยจาวาสคริปต์ธรรมดา (เช่น: ไม่จำเป็นต้องใช้ไลบรารี JQuery) คือการเปลี่ยน innerHTML ของ<select>แท็กให้เป็นค่าที่เหลือเพียงอย่างเดียวที่ต้องการ

ก่อน:

<select name='day' id='day'>
  <option>SUN</option>
  <option>MON</option>
  <option>TUE</option>
  <option>WED</option>
  <option>THU</option>
  <option>FRI</option>
  <option>SAT</option>
</select>

ตัวอย่าง Javascript:

document.getElementById('day').innerHTML = '<option>FRI</option>';

หลังจาก:

<select name='day' id='day'>
  <option>FRI</option>
</select>

วิธีนี้จะไม่มีการเปลี่ยนแปลงมีผล visiual และนี้จะโพสต์ / GET <FORM>ภายใน

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

โซลูชัน html:

<select onfocus="this.blur();">

คนจาวาสคริปต์:

selectElement.addEventListener("focus", selectElement.blur, true); selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

เพื่อลบ:

selectElement.removeEventListener("focus", selectElement.blur, true); selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

แก้ไข: เพิ่มวิธีลบ

เพียงแค่ลบแอตทริบิวต์ปิดการใช้งานก่อนที่จะส่งแบบฟอร์ม

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->จะได้รับค่าของคุณจากฐานข้อมูลและแสดงในแบบฟอร์ม readonly="readonly" ->คุณสามารถเปลี่ยนค่าของคุณใน selectbox แต่ค่าของคุณไม่สามารถบันทึกในฐานข้อมูลของคุณ

หากดร็อปดาวน์เลือกเป็นแบบอ่านอย่างเดียวตั้งแต่เกิดและไม่จำเป็นต้องเปลี่ยนเลยบางทีคุณควรใช้การควบคุมอื่นแทน? ชอบแบบง่าย<div>(รวมถึงเขตข้อมูลฟอร์มที่ซ่อนอยู่) หรือ<input type="text">?

เพิ่ม:หากดรอปดาวน์ไม่ได้เป็นแบบอ่านอย่างเดียวตลอดเวลาและมีการใช้ JavaScript เพื่อเปิดใช้งาน / ปิดใช้งานนี่เป็นวิธีการแก้ปัญหา - เพียงแค่ปรับเปลี่ยน DOM on-the-fly

ทำงานด้านล่างสำหรับฉัน:

$('select[name=country]').attr("disabled", "disabled"); 

ฉันจัดการโดยซ่อนกล่องเลือกและแสดง a spanแทนที่ด้วยค่าข้อมูลเท่านั้น เกี่ยวกับกรณีที่มีการปิดการใช้งานที่.readonlyระดับเราต้องยังจะเอา.toVanishองค์ประกอบและแสดง.toShowคน

 $( '.readonly' ).live( 'focus', function(e) {
                $( this ).attr( 'readonly', 'readonly' )
                if( $( this ).get(0).tagName == 'SELECT' ) {
                    $( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">' 
                            + $( this ).find( 'option:selected' ).html() + '</span>' )
                    $( this ).addClass( 'toShow' )
                    $( this ).hide()
            }
    });

ใน IE ฉันสามารถเอาชนะ onfocus => onblur approach ได้โดยดับเบิลคลิก แต่การจดจำค่าแล้วคืนค่าในเหตุการณ์ onchange ดูเหมือนว่าจะจัดการกับปัญหานั้นได้

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

คุณสามารถทำสิ่งที่คล้ายกันได้โดยไม่มีคุณสมบัติ expando โดยใช้ตัวแปร javascript

นี่คือความพยายามในการใช้ฟังก์ชัน jQuery ที่กำหนดเองเพื่อให้สามารถใช้งานได้

$(function(){

 $.prototype.toggleDisable = function(flag) {
    // prepare some values
    var selectId = $(this).attr('id');
    var hiddenId = selectId + 'hidden';
    if (flag) {
      // disable the select - however this will not submit the value of the select
      // a new hidden form element will be created below to compensate for the 
      // non-submitted select value 
      $(this).attr('disabled', true);

      // gather attributes
      var selectVal = $(this).val();
      var selectName = $(this).attr('name');

      // creates a hidden form element to submit the value of the disabled select
      $(this).parents('form').append($('<input></input>').
        attr('type', 'hidden').
        attr('id', hiddenId).
        attr('name', selectName).
        val(selectVal) );
    } else {
      // remove the newly-created hidden form element
      $(this).parents('form').remove(hiddenId);
      // enable back the element
      $(this).removeAttr('disabled');
    }
  }

  // Usage
  // $('#some_select_element').toggleDisable(true);
  // $('#some_select_element').toggleDisable(false);

});