HTML-форма только для чтения выберите тег / ввод

мы также можем использовать это

отключить все, кроме выбранного варианта:

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

таким образом, раскрывающийся список все еще работает (и отправляет свое значение), но пользователь не может выбрать другое значение.

демо

вы можете повторно включить объект select при отправке.

редактировать: то есть, обычно отключая тег select (с атрибутом disabled), а затем повторно включив его автоматически перед отправкой формы:

пример с jQuery:

• чтобы отключить его:

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

• чтобы повторно включить его перед отправкой, чтобы данные GET / POST были включены:

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

In кроме того, вы можете повторно включить каждый отключенный вход или выбрать:

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

другой способ сделать это до select элемент с помощью css

можно сделать так :

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

демо

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

протестировано и работает в IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Safari 3.2.1 для Windows и Google Chrome.

простое решение jQuery

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

простое решение CSS:

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

select[readonly] option{
    display:none;
}

это приводит к выбору серого цвета с хорошим" отключить " курсор при наведении
а на select список опций является "пустым", поэтому вы не можете изменить его значение.

еще один более современный вариант(без каламбура) - отключить все параметры элемента select, кроме выбранного.

обратите внимание, однако, что это функция HTML 4.0 и ie 6,7,8 beta 1, похоже, не уважает это.

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

Это лучшее решение, которое я нашел:

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

приведенный выше код запрещает все остальные параметры не выбраны при сохранении выбранного параметра включен. При этом выбранный параметр внесет его в данные post-back.

проще все-таки: добавить атрибут style в свой выберите tag:

style="pointer-events: none;"

установите select disabled, когда вы планируете, чтобы он был доступен только для чтения, а затем удалите атрибут disabled непосредственно перед отправкой формы.

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

в дополнение к отключению параметров, которые не должны быть выбраны, я хотел, чтобы они исчезли из списка, но все же смог включить их, если мне нужно позже:

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

это находит все элементы select с атрибутом readonly, затем находит все параметры внутри тех, которые не выбраны, затем скрывает их и отключает.

важно разделить запрос jquery на 2 по соображениям производительности, потому что jquery считывает их справа налево, код:

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

сначала найдет все невыбранные параметры в документе, а затем отфильтрует те, которые внутри выбирает с атрибутом readonly.

Это самое простое и лучшее решение. Вы установите readolny attr на свой выбор или любой другой attr, как data-readonly, и выполните следующие действия

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

Я знаю, что уже слишком поздно, но это можно сделать с помощью простого CSS:

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

стиль скрывает все параметры и группы, когда select находится в readonly государство, так что пользователь не может изменить свой выбор.

не требуется JavaScript-хаки.

один простой подход на стороне сервера-удалить все параметры, кроме того, который вы хотите выбрать. Таким образом, в Zend Framework 1.12, если $element является Zend_Form_Element_Select:

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

Если вы отключите поле формы, это не будет отправлено при отправке формы. Так что если вам нужно readonly, работающий disabled но отправка значений этого :

после любого изменения свойств элемента только для чтения.

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

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

после предложения Гранта Вагнера; вот фрагмент jQuery, который делает это с функциями обработчика вместо прямых атрибутов 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);
        }
    });

};

Я решил это с помощью jQuery:

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

Если вы используете jQuery validate, вы можете сделать следующее ниже, я использовал отключенный атрибут без проблем:

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

то, что я нашел, отлично работает с простым javascript (т. е. не требуется библиотека JQuery), чтобы изменить innerHTML <select> тег к желаемому единственному оставшемуся значению.

перед:

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

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

после:

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

таким образом, без изменения визуального эффекта, и это будет сообщение / получить в <FORM>.

решение с tabindex. работает с select, но и текстовые входы.

просто используйте a .класс инвалидов.

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: с Internet Explorer вам также нужен этот JS:

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

вместо самого выбора вы можете отключить все параметры, кроме выбранного в данный момент параметра. Это дает вид рабочего раскрывающегося списка, но только параметр, который вы хотите передать, является допустимым выбором.

html решение:

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

javascript ones:

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

удалить:

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

edit: добавлены методы удаления

просто удалите отключенный атрибут перед отправкой формы.

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

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

disabled="disabled" ->получит ваше значение из базы данных dan показать его в форме. readonly="readonly" ->вы можете изменить свое значение в selectbox, но ваше значение не удалось сохранить в базе данных.

Если выпадающий список select доступен только для чтения с момента рождения и не нуждается в изменении, возможно, вам следует использовать другой элемент управления? Как простой <div> (плюс скрытое поле формы) или <input type="text">?

добавлено: если выпадающий список не доступен только для чтения и JavaScript используется для его включения / выключения, то это все еще решение - просто измените DOM на лету.

ниже работал для меня :

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

мне удалось это скрыть поле выбора и показать span вместо него только информационное значение. На случай отключения .readonly класс, нам также нужно удалить .toVanish элементы и показать .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()
            }
    });

в IE я смог победить подход onfocus=>onblur двойным щелчком мыши. Но запоминание значения, а затем его восстановление в событии onchange, похоже, решает эту проблему.

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

вы можете сделать подобное без свойств expando, используя переменную javascript.

вот попытка использовать пользовательскую функцию jQuery для достижения функциональности (как указано здесь):

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

});