Forma HTML de solo lectura SELECCIONE etiqueta / entrada

Según las especificaciones HTML, la selectetiqueta en HTML no tiene un readonlyatributo, solo un disabledatributo. Entonces, si desea evitar que el usuario cambie el menú desplegable, debe usarlo disabled.

El único problema es que las entradas de formulario HTML deshabilitadas no se incluyen en los datos POST / GET.

¿Cuál es la mejor manera de emular el readonlyatributo de una selectetiqueta y aún así obtener los datos POST?

Debe mantener el selectelemento disabledpero también agregar otro oculto inputcon el mismo nombre y valor.

Si vuelve a habilitar su SELECT, debe copiar su valor a la entrada oculta en un evento onchange y deshabilitar (o eliminar) la entrada oculta.

Aquí hay una demostración:

$('#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>

También podríamos usar esto

Deshabilitar todo excepto la opción seleccionada:

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

De esta manera, el menú desplegable aún funciona (y envía su valor) pero el usuario no puede seleccionar otro valor.

Manifestación

Puede volver a habilitar el objeto seleccionado al enviar.

EDITAR : es decir, normalmente deshabilita la etiqueta de selección (con el atributo deshabilitado) y luego la vuelve a habilitar automáticamente justo antes de enviar el formulario:

Ejemplo con jQuery:

• Para deshabilitarlo:

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

• Para volver a habilitarlo antes del envío para que se incluyan los datos GET / POST:

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

Además, puede volver a habilitar cada entrada deshabilitada o seleccionar:

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

Otra forma de hacer un readOnlyatributo a un selectelemento es mediante el uso decss

podrías hacer como:

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

MANIFESTACIÓN

<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>

Probado y funcionando en IE 6, 7 y 8b2, Firefox 2 y 3, Opera 9.62, Safari 3.2.1 para Windows y Google Chrome.

Solución jQuery simple

Use esto si sus selecciones tienen la readonlyclase

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

O esto si sus selecciones tienen el readonly="readonly"atributo

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

Solución CSS simple:

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

select[readonly] option{
    display:none;
}

Esto da como resultado Seleccionar para ser gris con un bonito cursor "deshabilitar" al pasar el mouse
y al seleccionar la lista de opciones está "vacía", por lo que no puede cambiar su valor.

Otra opción más contemporánea (sin juego de palabras) es deshabilitar todas las opciones del elemento de selección que no sea el seleccionado.

Sin embargo, tenga en cuenta que esta es una característica de HTML 4.0 y es decir, 6,7,8 beta 1 parece no respetar esto.

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

Esta es la mejor solución que he encontrado:

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

El código anterior deshabilita todas las demás opciones no seleccionadas mientras mantiene habilitada la opción seleccionada. Al hacerlo, la opción seleccionada pasará a los datos posteriores.

Sé que es demasiado tarde, pero se puede hacer con CSS simple:

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

El estilo oculta todas las opciones y los grupos cuando la selección está en readonly estado, por lo que el usuario no puede cambiar su selección.

No se necesitan hacks de JavaScript.

Aún más fácil: agregue el atributo de estilo a su etiqueta seleccionada :

style="pointer-events: none;"

Esta es la mejor y más simple solución. Establecerá un atributo readolny en su selección, o cualquier otro atributo como solo lectura de datos, y hará lo siguiente

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

Establezca la opción deshabilitada cuando planee que sea de solo lectura y luego elimine el atributo deshabilitado justo antes de enviar el formulario.

// 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

Además de deshabilitar las opciones que no deberían ser seleccionables, quería hacerlas desaparecer de la lista, pero aún así poder habilitarlas si necesito hacerlo más tarde:

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

Esto busca todos los elementos de selección con un atributo de solo lectura, luego encuentra todas las opciones dentro de las selecciones que no están seleccionadas, luego las oculta y las desactiva.

Es importante separar la consulta jquery en 2 por razones de rendimiento, porque jquery las lee de derecha a izquierda, el código:

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

primero encontrará todas las opciones no seleccionadas en el documento y luego filtrará las que están dentro de las selecciones con un atributo de solo lectura.

Un enfoque simple del lado del servidor es eliminar todas las opciones excepto la que desea que se seleccione. Por lo tanto, en Zend Framework 1.12, si $ element es un Zend_Form_Element_Select:

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

Si deshabilita un campo de formulario, este no se enviará cuando se envíe el formulario. Entonces, si necesitas un readonlyque funcione comodisabled pero enviando valores, haga esto:

Después de cualquier cambio en las propiedades de solo lectura de un elemento.

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

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

Solución con tabindex. Funciona con select pero también con entradas de texto.

Simplemente use una clase .disabled.

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" />

Editar: con Internet Explorer, también necesita este JS:

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

Siguiendo con la sugerencia de Grant Wagners; Aquí hay un fragmento de jQuery que lo hace con funciones de controlador en lugar de atributos directos 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);
        }
    });

};

Lo resolví con jquery:

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

Si está utilizando jquery validate, puede hacer lo siguiente a continuación, utilicé el atributo deshabilitado sin ningún problema:

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

Lo que encontré funciona muy bien, con javascript simple (es decir: no se requiere la biblioteca JQuery), es cambiar el innerHTML de la <select>etiqueta al valor restante único deseado.

Antes de:

<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 de muestra:

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

Después:

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

De esta manera, no cambiará el efecto visual, y esto POST / GET dentro de <FORM>.

En lugar de seleccionar en sí, puede deshabilitar todas las opciones, excepto la opción seleccionada actualmente. Esto da la apariencia de un menú desplegable de trabajo, pero solo la opción que desea pasar es una selección válida.

solución html:

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

los de javascript:

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

para eliminar:

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

editar: se agregaron métodos de eliminación

Simplemente, elimine el atributo deshabilitado antes de enviar el formulario.

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

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

disabled="disabled" ->obtendrá su valor de la base de datos y lo mostrará en el formulario. readonly="readonly" ->puede cambiar su valor en selectbox, pero su valor no se pudo guardar en su base de datos.

Si el menú desplegable de selección es de solo lectura desde el nacimiento y no necesita cambiar en absoluto, ¿tal vez debería usar otro control? Como un simple <div>(más un campo de formulario oculto) o un<input type="text"> ?

Agregado: si el menú desplegable no es de solo lectura todo el tiempo y se usa JavaScript para habilitarlo / deshabilitarlo, entonces esta sigue siendo una solución: simplemente modifique el DOM sobre la marcha.

A continuación funcionó para mí:

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

Lo logré ocultando el cuadro de selección y mostrando un spanen su lugar con solo valor informativo. En el caso de deshabilitar la .readonlyclase, también necesitamos eliminar los .toVanishelementos y mostrar los elementos .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()
            }
    });

En IE pude derrotar el enfoque onfocus => onblur haciendo doble clic. Pero recordar el valor y luego restaurarlo en el evento onchange parece manejar ese problema.

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

Puede hacer algo similar sin expandir las propiedades utilizando una variable javascript.

Aquí hay un intento de usar una función jQuery personalizada para lograr la funcionalidad (como se menciona aquí):

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

});