HTML-Formular schreibgeschützt SELECT-Tag / Eingabe

Gemäß den HTML-Spezifikationen hat das selectTag in HTML kein readonlyAttribut, sondern nur ein disabledAttribut. Wenn Sie also verhindern möchten, dass der Benutzer das Dropdown-Menü ändert, müssen Sie verwenden disabled.

Das einzige Problem ist, dass deaktivierte HTML-Formulareingaben nicht in die POST / GET-Daten aufgenommen werden.

Was ist der beste Weg, um das readonlyAttribut für ein selectTag zu emulieren und trotzdem die POST-Daten abzurufen?

Sie sollten das selectElement beibehalten, disabledaber auch ein weiteres Element inputmit demselben Namen und Wert hinzufügen .

Wenn Sie SELECT wieder aktivieren, sollten Sie seinen Wert in die On-Hidden-Eingabe eines Onchange-Ereignisses kopieren und die Hidden-Eingabe deaktivieren (oder entfernen).

Hier ist eine 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>

Wir könnten das auch nutzen

Deaktivieren Sie alle außer der ausgewählten Option:

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

Auf diese Weise funktioniert das Dropdown-Menü weiterhin (und übermittelt seinen Wert), der Benutzer kann jedoch keinen anderen Wert auswählen.

Demo

Sie können das ausgewählte Objekt beim Senden wieder aktivieren.

BEARBEITEN : dh normalerweise das Auswahl-Tag (mit dem deaktivierten Attribut) deaktivieren und dann kurz vor dem Absenden des Formulars automatisch wieder aktivieren:

Beispiel mit jQuery:

• So deaktivieren Sie es:

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

• So aktivieren Sie es vor der Übermittlung erneut, damit GET / POST-Daten enthalten sind:

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

Darüber hinaus können Sie jeden deaktivierten Eingang wieder aktivieren oder Folgendes auswählen:

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

Eine andere Möglichkeit readOnly, einem selectElement ein Attribut zuzuweisen, ist die Verwendung voncss

Sie könnten mögen:

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

Getestet und funktionsfähig in IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Safari 3.2.1 für Windows und Google Chrome.

Einfache jQuery-Lösung

Verwenden Sie diese Option, wenn Ihre Auswahl die readonlyKlasse hat

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

Oder dies, wenn Ihre Auswahl das readonly="readonly"Attribut hat

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

Einfache CSS-Lösung:

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

select[readonly] option{
    display:none;
}

Dies führt dazu, dass Select grau mit einem schönen Cursor "Deaktivieren" beim Hover ist
und bei Auswahl die Liste der Optionen "leer" ist, sodass Sie den Wert nicht ändern können.

Eine weitere zeitgemäßere Option (kein Wortspiel beabsichtigt) besteht darin, alle Optionen des ausgewählten Elements außer dem ausgewählten zu deaktivieren.

Beachten Sie jedoch, dass dies eine HTML 4.0-Funktion ist und 6,7,8 Beta 1 dies anscheinend nicht respektiert.

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

Dies ist die beste Lösung, die ich gefunden habe:

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

Der obige Code deaktiviert alle anderen nicht ausgewählten Optionen, während die ausgewählte Option aktiviert bleibt. Wenn Sie dies tun, wird die ausgewählte Option in die Post-Back-Daten aufgenommen.

Ich weiß, dass es viel zu spät ist, aber es kann mit einfachem CSS gemacht werden:

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

Der Stil verbirgt alle Optionen und Gruppen, wenn sich die Auswahl im readonlyStatus befindet, sodass der Benutzer seine Auswahl nicht ändern kann.

Es sind keine JavaScript-Hacks erforderlich.

Noch einfacher: Fügen Sie das Stilattribut zu Ihrem ausgewählten Tag hinzu:

style="pointer-events: none;"

Dies ist die einfachste und beste Lösung. Sie setzen einen Readolny-Attr auf Ihre Auswahl oder einen anderen Attr wie Daten-Readonly und führen die folgenden Schritte aus

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

Setzen Sie die Auswahl deaktiviert, wenn Sie planen, dass sie schreibgeschützt ist, und entfernen Sie dann das Attribut deaktiviert, bevor Sie das Formular senden.

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

Zusätzlich zum Deaktivieren der Optionen, die nicht auswählbar sein sollten, wollte ich sie tatsächlich aus der Liste verschwinden lassen, sie aber dennoch aktivieren können, falls ich sie später benötigen sollte:

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

Dadurch werden alle ausgewählten Elemente mit einem schreibgeschützten Attribut gefunden. Anschließend werden alle Optionen in den nicht ausgewählten Auswahlelementen gefunden. Anschließend werden sie ausgeblendet und deaktiviert.

Aus Leistungsgründen ist es wichtig, die jquery-Abfrage in 2 zu trennen, da jquery den Code von rechts nach links liest:

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

findet zuerst alle nicht ausgewählten Optionen im Dokument und filtert dann die darin enthaltenen Optionen mit einem schreibgeschützten Attribut.

Ein einfacher serverseitiger Ansatz besteht darin, alle Optionen außer der Option zu entfernen, die Sie auswählen möchten. Wenn also in Zend Framework 1.12 $ element ein Zend_Form_Element_Select ist:

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

Wenn Sie ein Formularfeld deaktivieren, wird dieses beim Senden des Formulars nicht gesendet. Wenn Sie also eine benötigen readonly, die funktioniert, disabledaber Werte sendet, gehen Sie wie folgt vor:

Nach jeder Änderung der schreibgeschützten Eigenschaften eines Elements.

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

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

Lösung mit Tabindex. Funktioniert mit ausgewählten, aber auch Texteingaben.

Verwenden Sie einfach eine .disabled-Klasse.

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

Bearbeiten: Mit Internet Explorer benötigen Sie auch diese JS:

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

Nach dem Vorschlag von Grant Wagners; Hier ist ein jQuery-Snippet, das dies mit Handlerfunktionen anstelle von direkten onXXX-Attributen ausführt:

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

};

Ich habe es mit jquery gelöst:

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

Wenn Sie jquery validate verwenden, können Sie Folgendes tun: Ich habe das Attribut disabled ohne Probleme verwendet:

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

Was ich mit einfachem Javascript (dh keine JQuery-Bibliothek erforderlich) funktioniert, ist, das innerHTML des <select>Tags auf den gewünschten verbleibenden Wert zu ändern .

Vor:

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

Beispiel Javascript:

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

Nach:

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

Auf diese Weise ändert sich kein visueller Effekt, und dies wird POST / GET innerhalb des <FORM>.

Anstelle der Auswahl selbst können Sie alle Optionen außer der aktuell ausgewählten Option deaktivieren. Dadurch wird ein funktionierendes Dropdown-Menü angezeigt, aber nur die Option, die Sie übergeben möchten, ist eine gültige Auswahl.

HTML-Lösung:

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

Javascript:

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

zu entfernen:

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

Bearbeiten: Methoden zum Entfernen hinzugefügt

Entfernen Sie einfach das deaktivierte Attribut, bevor Sie das Formular senden.

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

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

disabled="disabled" ->Sie erhalten Ihren Wert aus der Datenbank und zeigen ihn im Formular an. readonly="readonly" ->Sie können Ihren Wert in der Auswahlbox ändern, aber Ihr Wert konnte nicht in Ihrer Datenbank gespeichert werden.

Wenn die Auswahl-Dropdown-Liste seit der Geburt schreibgeschützt ist und sich überhaupt nicht ändern muss, sollten Sie stattdessen möglicherweise ein anderes Steuerelement verwenden. Wie ein einfaches <div>(plus verstecktes Formularfeld) oder ein<input type="text"> ?

Hinzugefügt: Wenn das Dropdown-Menü nicht immer schreibgeschützt ist und JavaScript zum Aktivieren / Deaktivieren verwendet wird, ist dies immer noch eine Lösung. Ändern Sie einfach das DOM im laufenden Betrieb.

Unten hat bei mir funktioniert:

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

Ich habe es geschafft, indem ich das Auswahlfeld ausgeblendet und spanan seiner Stelle ein mit nur informativem Wert angezeigt habe. Wenn die .readonlyKlasse deaktiviert wird , müssen wir auch die .toVanishElemente entfernen und .toShowdiejenigen anzeigen.

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

Im IE konnte ich den onfocus => onblur-Ansatz durch Doppelklick besiegen. Das Speichern des Werts und das anschließende Wiederherstellen im onchange-Ereignis scheint dieses Problem zu lösen.

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

Sie können ähnliche Aktionen ohne expando-Eigenschaften ausführen, indem Sie eine Javascript-Variable verwenden.

Hier ist ein Versuch, eine benutzerdefinierte jQuery-Funktion zu verwenden, um die Funktionalität zu erreichen (wie hier erwähnt):

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

});