Modulo HTML di sola lettura SELEZIONA tag / input

Secondo le specifiche HTML, il selecttag in HTML non ha unreadonly attributo, ma solo un disabledattributo. Quindi, se si desidera impedire all'utente di modificare il menu a discesa, è necessario utilizzare disabled.

L'unico problema è che gli input del modulo HTML disabilitati non vengono inclusi nei dati POST / GET.

Qual è il modo migliore per emulare l' readonlyattributo per un selecttag e ottenere comunque i dati POST?

Dovresti mantenere l' selectelemento disabledma anche aggiungerne un altro nascosto inputcon lo stesso nome e valore.

Se si riattiva SELECT, è necessario copiarne il valore nell'input nascosto in un evento onchange e disabilitare (o rimuovere) l'input nascosto.

Ecco una demo:

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

Potremmo anche usare questo

Disabilita tutto tranne l'opzione selezionata:

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

In questo modo il menu a discesa funziona ancora (e invia il suo valore) ma l'utente non può selezionare un altro valore.

dimostrazione

È possibile riattivare l'oggetto select al momento dell'invio.

MODIFICARE : cioè, normalmente disabilitando il tag select (con l'attributo disabilitato) e quindi riattivandolo automaticamente prima di inviare il modulo:

Esempio con jQuery:

• Per disabilitarlo:

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

• Per riattivarlo prima dell'invio in modo da includere i dati GET / POST:

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

Inoltre, è possibile riattivare ogni input disabilitato o selezionare:

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

un altro modo di fare un readOnlyattributo a un selectelemento è usandocss

potresti fare come:

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

Testato e funzionante in IE 6, 7 e 8b2, Firefox 2 e 3, Opera 9.62, Safari 3.2.1 per Windows e Google Chrome.

Semplice soluzione jQuery

Usa questo se i tuoi selettori hanno la readonlyclasse

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

O questo se la tua selezione ha l' readonly="readonly"attributo

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

Soluzione CSS semplice:

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

select[readonly] option{
    display:none;
}

Ciò si traduce in Seleziona per essere grigia con un bel cursore "disabilita" al passaggio del mouse
e su seleziona l'elenco delle opzioni è "vuoto", quindi non puoi modificarne il valore.

Ancora un'altra opzione più contemporanea (nessun gioco di parole previsto) è quella di disabilitare tutte le opzioni dell'elemento selezionato oltre a quella selezionata.

si noti tuttavia che questa è una funzionalità HTML 4.0 e cioè 6,7,8 beta 1 sembra non rispettarla.

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

Questa è la migliore soluzione che ho trovato:

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

Il codice sopra disabilita tutte le altre opzioni non selezionate mantenendo abilitata l'opzione selezionata. In questo modo l'opzione selezionata lo trasformerà nei dati post-back.

So che è troppo tardi, ma può essere fatto con un semplice CSS:

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

Lo stile nasconde tutte le opzioni e i gruppi quando la selezione è attiva readonly stato, quindi l'utente non può modificare la sua selezione.

Non sono necessari hack JavaScript.

Ancora più semplice: aggiungi l'attributo style al tag select :

style="pointer-events: none;"

Questa è la soluzione più semplice e migliore. Imposterai un attr readolny sulla tua selezione, o qualsiasi altro attr come i dati in sola lettura e effettuerai le seguenti operazioni

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

Impostare la selezione disabilitata quando si prevede che sia di sola lettura e quindi rimuovere l'attributo disabilitato appena prima di inviare il modulo.

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

Oltre a disabilitare le opzioni che non dovrebbero essere selezionabili, volevo effettivamente farle sparire dall'elenco, ma essere comunque in grado di abilitarle se dovessi:

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

Questo trova tutti gli elementi di selezione con un attributo di sola lettura, quindi trova tutte le opzioni all'interno di quelle selezioni che non sono selezionate, quindi le nasconde e le disabilita.

È importante separare la query jquery in 2 per motivi di prestazioni, poiché jquery li legge da destra a sinistra, il codice:

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

troverà prima tutte le opzioni non selezionate nel documento e quindi filtrerà quelle che si trovano all'interno di selezioni con un attributo di sola lettura.

Un semplice approccio lato server consiste nel rimuovere tutte le opzioni tranne quella che si desidera selezionare. Pertanto, in Zend Framework 1.12, se $ element è un Zend_Form_Element_Select:

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

Se disabiliti un campo modulo, questo non verrà inviato quando il modulo viene inviato. Quindi, se hai bisogno di un readonlyche funziona comedisabled ma l'invio di valori fai questo:

Dopo qualsiasi modifica alle proprietà di sola lettura di un elemento.

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

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

Soluzione con tabindex.Funziona con input selezionati ma anche con testo.

Usa semplicemente una 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" />

Modifica: con Internet Explorer, è necessario anche questo JS:

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

Seguendo il suggerimento di Grant Wagners; ecco uno snippet jQuery che lo fa con le funzioni del gestore invece degli attributi onXXX diretti:

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

};

L'ho risolto con jquery:

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

Se stai usando jquery validate, puoi fare quanto segue, ho usato l'attributo disabilitato senza problemi:

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

Quello che ho trovato funziona alla grande, con javascript semplice (cioè: nessuna libreria JQuery richiesta), è di cambiare il innerHTML del <select>tag nel singolo valore rimanente desiderato.

Prima:

<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 di esempio:

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

Dopo:

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

In questo modo, non cambia alcun effetto visivo e questo POST / RICEVERA 'all'interno di <FORM>.

Invece della selezione stessa, è possibile disabilitare tutte le opzioni ad eccezione dell'opzione attualmente selezionata. Questo dà l'aspetto di un menu a discesa funzionante, ma solo l'opzione che si desidera passare è una selezione valida.

soluzione HTML:

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

quelli javascript:

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

rimuovere:

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

modifica: aggiunti metodi di rimozione

Rimuovere semplicemente l'attributo disabilitato prima di inviare il modulo.

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

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

disabled="disabled" ->otterrà il tuo valore dal database e lo mostrerà nel modulo. readonly="readonly" ->puoi cambiare il tuo valore in selectbox, ma il tuo valore non è stato salvato nel tuo database.

Se il menu a discesa Seleziona è di sola lettura sin dalla nascita e non è necessario modificarlo, forse dovresti usare un altro controllo? Come un semplice <div>(più campo modulo nascosto) o un <input type="text">?

Aggiunto: se il menu a discesa non è sempre di sola lettura e viene utilizzato JavaScript per abilitarlo / disabilitarlo, questa è comunque una soluzione: basta modificare il DOM al volo.

Di seguito ha funzionato per me:

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

L'ho gestito nascondendo la casella di selezione e mostrando un spanal suo posto con solo valore informativo. In caso di disabilitazione della .readonlyclasse, dobbiamo anche rimuovere gli .toVanishelementi e mostrarli .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()
            }
    });

In IE sono stato in grado di sconfiggere l'approccio onfocus => onblur facendo doppio clic. Ma ricordare il valore e quindi ripristinarlo nell'evento onchange sembra gestire quel problema.

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

Puoi fare simili senza espanderne le proprietà usando una variabile javascript.

Ecco un tentativo di utilizzare una funzione jQuery personalizzata per ottenere la funzionalità (come menzionato qui):

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

});