Formularz HTML tylko do odczytu WYBIERZ znacznik / wejście

Zgodnie ze specyfikacjami HTML selecttag w HTML nie ma readonlyatrybutu, tylko disabledatrybut. Więc jeśli chcesz powstrzymać użytkownika przed zmianą listy rozwijanej, musisz użyć disabled.

Jedynym problemem jest to, że wyłączone dane formularzy HTML nie są uwzględniane w danych POST / GET.

Jaki jest najlepszy sposób na emulację readonlyatrybutu dla selecttagu i uzyskanie danych POST?

Powinieneś zachować selectelement, disabledale także dodać kolejny ukryty inputo tej samej nazwie i wartości.

Jeśli ponownie włączysz SELECT, powinieneś skopiować jego wartość do ukrytego wejścia w zdarzeniu onchange i wyłączyć (lub usunąć) ukryte wejście.

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

Przydałoby się to również

Wyłącz wszystkie oprócz wybranej opcji:

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

W ten sposób menu rozwijane nadal działa (i przesyła swoją wartość), ale użytkownik nie może wybrać innej wartości.

Próbny

Możesz ponownie włączyć wybrany obiekt po przesłaniu.

EDYTOWAĆ : tzn. Zwykle wyłącza tag wyboru (z atrybutem disabled), a następnie automatycznie włącza go ponownie przed przesłaniem formularza:

Przykład z jQuery:

• Aby to wyłączyć:

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

• Aby włączyć ponownie przed wysłaniem, aby uwzględnić dane GET / POST:

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

Ponadto można ponownie włączyć każde wyłączone wejście lub wybrać:

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

inny sposób readOnlyprzypisania atrybutu doselect elementu jest użyciecss

możesz zrobić jak:

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

PRÓBNY

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

Testowane i działające w IE 6, 7 i 8b2, Firefox 2 i 3, Opera 9.62, Safari 3.2.1 dla Windows i Google Chrome.

Proste rozwiązanie jQuery

Użyj tego, jeśli wybrani mają readonlyklasę

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

Lub to, jeśli wybrane mają readonly="readonly"atrybut

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

Proste rozwiązanie CSS:

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

select[readonly] option{
    display:none;
}

Powoduje to, że Select jest szary z ładnym kursorem „wyłącz” po najechaniu myszką,
a po wybraniu lista opcji jest „pusta”, więc nie można zmienić jej wartości.

Jeszcze inną bardziej współczesną opcją (bez zamierzonej gry słów) jest wyłączenie wszystkich opcji elementu select innego niż wybrany.

Zwróć jednak uwagę, że jest to funkcja HTML 4.0 i wydaje się, że 6,7,8 beta 1 tego nie przestrzega.

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

To najlepsze rozwiązanie, jakie znalazłem:

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

Powyższy kod wyłącza wszystkie inne niewybrane opcje, pozostawiając zaznaczoną opcję włączoną. W ten sposób wybrana opcja przejdzie do danych po wycofaniu.

Wiem, że jest o wiele za późno, ale można to zrobić za pomocą prostego CSS:

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

Styl ukrywa wszystkie opcje i grupy, gdy zaznaczenie jest włączone readonly stanie, więc użytkownik nie może zmienić swojego wyboru.

Nie są potrzebne żadne włamania JavaScript.

Jeszcze łatwiej: dodaj atrybut style do tagu select :

style="pointer-events: none;"

To jest najprostsze i najlepsze rozwiązanie. Ustawisz readolny attr na wybranym elemencie lub dowolnym innym atrybucie, takim jak read-only data, i wykonaj następujące czynności

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

Ustaw opcję wyłączony, gdy planujesz, aby była tylko do odczytu, a następnie usuń atrybut wyłączony tuż przed przesłaniem formularza.

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

Oprócz wyłączenia opcji, które nie powinny być dostępne, chciałem sprawić, by zniknęły z listy, ale nadal mogę je włączyć, jeśli będę musiał później:

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

Znajduje wszystkie elementy select z atrybutem tylko do odczytu, a następnie znajduje wszystkie opcje wewnątrz tych zaznaczeń, które nie są zaznaczone, a następnie ukrywa je i wyłącza.

Ważne jest oddzielenie zapytania jquery w 2 ze względu na wydajność, ponieważ jquery czyta je od prawej do lewej, kod:

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

najpierw znajdzie wszystkie niezaznaczone opcje w dokumencie, a następnie odfiltruje te, które są w środku, zaznacza za pomocą atrybutu tylko do odczytu.

Jednym prostym podejściem po stronie serwera jest usunięcie wszystkich opcji oprócz tej, którą chcesz wybrać. Zatem w Zend Framework 1.12, jeśli $ element jest Zend_Form_Element_Select:

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

Jeśli wyłączysz pole formularza, nie zostanie ono wysłane po przesłaniu formularza. Więc jeśli potrzebujeszreadonly który działa, disabledale wysyłanie wartości zrób to:

Po każdej zmianie właściwości tylko do odczytu elementu.

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

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

Rozwiązanie z tabindex.Działa z wybranymi, ale także z wprowadzaniem tekstu.

Wystarczy użyć klasy .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" />

Edycja: W przeglądarce Internet Explorer potrzebujesz również tego JS:

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

Zgodnie z sugestią Granta Wagnersa; oto fragment kodu jQuery, który robi to z funkcjami modułu obsługi zamiast bezpośrednich atrybutów 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);
        }
    });

};

Rozwiązałem to za pomocą jquery:

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

Jeśli używasz sprawdzania poprawności jquery, możesz wykonać następujące czynności, bez problemu użyłem atrybutu disabled:

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

To, co znalazłem, działa świetnie, przy zwykłym javascript (tj .: nie jest wymagana biblioteka JQuery), jest zmiana innerHTML <select>znacznika na pożądaną pojedynczą pozostałą wartość.

Przed:

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

Przykładowy Javascript:

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

Po:

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

W ten sposób nie zmieni się efekt wizualny, a to POST / GET w <FORM>.

Zamiast samego wyboru można wyłączyć wszystkie opcje oprócz aktualnie wybranej opcji. Daje to wygląd działającego menu, ale poprawna jest tylko opcja, którą chcesz przekazać.

rozwiązanie HTML:

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

javascript:

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

usuwać:

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

edycja: dodano metody usuwania

Po prostu usuń wyłączony atrybut przed przesłaniem formularza.

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

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

disabled="disabled" ->dostanie twoją wartość z bazy danych i pokaż ją w formularzu. readonly="readonly" ->możesz zmienić swoją wartość w polu wyboru, ale nie możesz zapisać swojej wartości w bazie danych.

Jeśli lista rozwijana wyboru jest tylko do odczytu od urodzenia i wcale nie musi się zmieniać, być może powinieneś użyć innej kontroli? Jak proste <div>(plus ukryte pole formularza) czy <input type="text">?

Dodano: Jeśli lista rozwijana nie jest dostępna tylko do odczytu, a JavaScript jest używany do jej włączenia / wyłączenia, to nadal jest to rozwiązanie - wystarczy zmodyfikować DOM w locie.

Poniżej pracował dla mnie:

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

Udało mi się to, ukrywając pole wyboru i pokazując na spanjego miejscu jedynie wartość informacyjną. W przypadku wyłączenia .readonlyklasy musimy również usunąć .toVanishelementy i pokazać je .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()
            }
    });

W IE udało mi się pokonać podejście onfocus => onblur, klikając dwukrotnie. Ale zapamiętywanie wartości, a następnie przywracanie jej w zdarzeniu onchange wydaje się rozwiązywać ten problem.

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

Możesz zrobić podobnie bez właściwości expando, używając zmiennej javascript.

Oto próba użycia niestandardowej funkcji jQuery w celu osiągnięcia tej funkcjonalności (jak wspomniano tutaj):

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

});