javascript - bootstrap - Formulario HTML de solo lectura SELECT tag/input

select html javascript

Question

Según las especificaciones de HTML, la etiqueta de select en HTML no tiene un atributo de solo readonly , solo un atributo disabled . Entonces, si desea evitar que el usuario cambie el menú desplegable, debe usar 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 atributo de readonly para una etiqueta de select y aún así obtener los datos POST?

Answer 1

A continuación funcionó para mí:

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

Answer 2

Además de deshabilitar las opciones que no deberían seleccionarse, quería que desaparecieran de la lista, pero aún así podría habilitarlas si fuera necesario:

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

Esto encuentra todos los elementos seleccionados con un atributo de solo lectura, luego encuentra todas las opciones dentro de los seleccionados que no están seleccionados, luego los oculta y los 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.

Answer 3

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

});

Answer 4

Debe mantener el elemento de select disabled pero también agregar otra input oculta con el mismo nombre y valor.

Si vuelve a habilitar su SELECT, debe copiar su valor a la entrada oculta en un evento onchange y desactivar (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>

Answer 5

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>

Puedes hacer propiedades similares sin expandir usando una variable javascript.

Answer 6

En lugar de seleccionarlo 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 que se pase es una selección válida.

Answer 7

Esta es la mejor solución que he encontrado:

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

El código anterior desactiva todas las demás opciones que no se han seleccionado, manteniendo la opción seleccionada habilitada. Al hacerlo, la opción seleccionada lo hará en los datos de post-back.

Answer 8

Esta es la solución más simple y mejor. Usted establecerá un campo de lectura en su selección, o cualquier otro tipo de lectura de datos, y hará lo siguiente

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

Answer 9

Establezca la selecció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

Answer 10

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

Answer 11

Lo que encontré funciona bien, con javascript simple (es decir, no se requiere una biblioteca de JQuery), es cambiar el HTML interno de la etiqueta <select> 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>

Ejemplo de Javascript:

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

Después:

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

De esta manera, no hay ningún cambio de efecto visual, y esto POST / GET dentro de la <FORM> .

Answer 12

Lo resolví con jQuery:

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

Answer 13

Más fácil aún: agregue el atributo de estilo a su etiqueta de selección :

style="pointer-events: none;"

Answer 14

Otra forma de hacer un atributo readOnly a un elemento de select es usando css

usted podría hacer como

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

DEMO

Answer 15

Otra opción más contemporánea (sin intención de juego de palabras) es deshabilitar todas las opciones del elemento seleccionado 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

Answer 16

Puede volver a habilitar el objeto seleccionado en el envío.

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

Ejemplo con jQuery:

• Para desactivarlo:

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

Answer 17

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 estado de readonly , por lo que el usuario no puede cambiar su selección.

No se necesitan hacks de JavaScript.

Answer 18

Si deshabilita un campo de formulario, esto no se enviará cuando se envíe el formulario. Por lo tanto, si necesita una readonly que funcione como disabled pero con valores de envío, 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'');

Answer 19

Si el menú desplegable de selección es de solo lectura desde el nacimiento y no necesita cambiar nada, ¿quizás debería usar otro control en su lugar? ¿Te gusta 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 esto sigue siendo una solución, solo modifique el DOM sobre la marcha.

Answer 20

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

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

Answer 21

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

};

Answer 22

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

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

Answer 23

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 buen cursor de "deshabilitar" al pasar el cursor
y en seleccionar, la lista de opciones está "vacía", por lo que no puede cambiar su valor.

Answer 24

Solución jQuery simple

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

Answer 25

También podríamos usar este

Desactivar 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 todavía funciona (y envía su valor) pero el usuario no puede seleccionar otro valor.

Demo

Answer 26

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

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

Answer 27

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

Edición: añadidos eliminar métodos

Answer 28

Solución con tabindex. Funciona con entradas selectas pero también 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" />

Edición: con Internet Explorer, también necesita este JS:

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

Answer 29

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

Answer 30

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