Formulário HTML somente leitura SELECT tag / entrada

De acordo com as especificações HTML, a selecttag em HTML não tem um readonlyatributo, apenas um disabledatributo. Portanto, se você deseja impedir que o usuário altere a lista suspensa, é necessário usá-lo disabled.

O único problema é que as entradas de formulário HTML desabilitadas não são incluídas nos dados POST / GET.

Qual é a melhor maneira de emular o readonlyatributo de uma selecttag e ainda obter os dados POST?

Você deve manter o selectelemento, disabledmas também adicionar outro oculto inputcom o mesmo nome e valor.

Se você reativar seu SELECT, copie seu valor para a entrada oculta em um evento onchange e desative (ou remova) a entrada oculta.

Aqui está uma demonstração:

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

Nós também poderíamos usar isso

Desative todos, exceto a opção selecionada:

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

Dessa forma, o menu suspenso ainda funciona (e envia seu valor), mas o usuário não pode selecionar outro valor.

Demo

Você pode reativar o objeto selecionado ao enviar.

EDIT : ou seja, normalmente desabilitando a tag select (com o atributo desabilitado) e, em seguida, reativando-a automaticamente antes de enviar o formulário:

Exemplo com jQuery:

• Para desativá-lo:

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

• Para reativá-lo antes do envio para que os dados GET / POST sejam incluídos:

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

Além disso, você pode reativar todas as entradas desativadas ou selecionar:

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

Outra maneira de fazer um readOnlyatributo para um selectelemento é usandocss

você poderia fazer como:

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

DEMO

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

Testado e funcionando no IE 6, 7 e 8b2, Firefox 2 e 3, Opera 9.62, Safari 3.2.1 para Windows e Google Chrome.

Solução jQuery simples

Use isso se os seus selecionados tiverem a readonlyclasse

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

Ou isso se suas seleções tiverem o readonly="readonly"atributo

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

Solução CSS simples:

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

select[readonly] option{
    display:none;
}

Isso resulta em Selecionar para ficar cinza com o cursor "desativar" agradável ao passar o mouse
e ao selecionar a lista de opções como "vazia", ​​para que você não possa alterar seu valor.

Ainda outra opção mais contemporânea (sem trocadilhos) é desativar todas as opções do elemento de seleção que não o selecionado.

note, no entanto, que esse é um recurso do HTML 4.0 e, por exemplo, 6,7,8 beta 1 parecem não respeitar isso.

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

Esta é a melhor solução que encontrei:

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

O código acima desativa todas as outras opções não selecionadas enquanto mantém a opção selecionada ativada. Ao fazer isso, a opção selecionada entrará nos dados de postagem posterior.

Eu sei que é tarde demais, mas isso pode ser feito com CSS simples:

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

O estilo oculta todas as opções e grupos quando a seleção está no readonlyestado, para que o usuário não possa alterar sua seleção.

Não são necessários hacks JavaScript.

Mais fácil ainda: adicione o atributo style à sua tag de seleção :

style="pointer-events: none;"

Esta é a melhor e mais simples solução. Você definirá um atributo readolny no seu select ou qualquer outro atributo como somente leitura de dados e faça o seguinte

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

Defina a seleção desativada quando planejar que seja somente leitura e remova o atributo desativado antes de enviar o formulário.

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

Além de desabilitar as opções que não deveriam ser selecionáveis, eu queria fazê-las desaparecer da lista, mas ainda assim poder habilitá-las caso precise:

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

Ele localiza todos os elementos selecionados com um atributo somente leitura, depois encontra todas as opções dentro daquelas que não estão selecionadas, depois os oculta e desativa.

É importante separar a consulta jquery em 2 por razões de desempenho, porque o jquery as lê da direita para a esquerda, o código:

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

primeiro encontrará todas as opções não selecionadas no documento e depois filtrará as que estão dentro das seleções com um atributo somente leitura.

Uma abordagem simples do lado do servidor é remover todas as opções, exceto a que você deseja selecionar. Portanto, no Zend Framework 1.12, se o elemento $ for um Zend_Form_Element_Select:

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

Se você desativar um campo de formulário, ele não será enviado quando o formulário for enviado. Portanto, se você precisar de um readonlyque funcione como o disabledenvio de valores, faça o seguinte:

Após qualquer alteração nas propriedades somente leitura de um elemento.

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

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

Solução com tabindex. Funciona com entradas de texto selecionadas, mas também com texto.

Basta usar uma classe .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" />

Edit: Com o Internet Explorer, você também precisa deste JS:

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

Seguindo a sugestão de Grant Wagners; Aqui está um trecho de jQuery que faz isso com funções de manipulador em vez de atributos diretos 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);
        }
    });

};

Eu resolvi isso com jquery:

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

Se você estiver usando o jquery validate, poderá fazer o seguinte abaixo, usei o atributo desativado sem problemas:

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

O que eu achei que funciona muito bem, com javascript simples (ou seja: nenhuma biblioteca JQuery necessária), é alterar o innerHTML da <select>tag para o valor restante único desejado.

Antes:

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

Exemplo de Javascript:

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

Depois de:

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

Dessa forma, nenhum efeito visual muda, e isso POST / GET dentro do <FORM>.

Em vez da seleção em si, você pode desativar todas as opções, exceto a opção atualmente selecionada. Isso dá a aparência de um menu suspenso em funcionamento, mas apenas a opção que você deseja transmitir é uma seleção válida.

solução html:

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

javascript:

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

remover:

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

edit: métodos de remoção adicionados

Simplesmente, remova o atributo desativado antes de enviar o formulário.

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

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

disabled="disabled" ->obterá seu valor do banco de dados e mostrará no formulário. readonly="readonly" ->você pode alterar seu valor na caixa de seleção, mas não foi possível salvar seu valor no seu banco de dados.

Se o menu suspenso de seleção for somente leitura desde o nascimento e não precisar mudar, talvez você deva usar outro controle? Como um simples <div>(mais o campo de formulário oculto) ou um <input type="text">?

Adicionado: se o menu suspenso não for somente leitura o tempo todo e o JavaScript for usado para habilitá-lo / desativá-lo, isso ainda será uma solução - basta modificar o DOM on-the-fly.

Abaixo trabalhou para mim:

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

Eu o consegui ocultando a caixa de seleção e mostrando um spanem seu lugar apenas com valor informativo. No caso de desativar a .readonlyclasse, precisamos também remover os .toVanishelementos e mostrar o.toShow os.

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

No IE, fui capaz de derrotar a abordagem onfocus => onblur clicando duas vezes. Mas lembrar o valor e restaurá-lo no evento onchange parece lidar com esse problema.

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

Você pode fazer similar sem expando propriedades usando uma variável javascript.

Aqui está uma tentativa de usar uma função jQuery personalizada para obter a funcionalidade (conforme mencionado aqui):

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

});