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

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

РЕДАКТИРОВАТЬ: то есть обычно отключение тега select (с атрибутом disabled), а затем его автоматическое повторное включение непосредственно перед отправкой формы:

Пример с jQuery:

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

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

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

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

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

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

Вы должны сохранить элемент selectdisabled, но также добавить еще один скрытый input с тем же именем и значением.

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

Вот демонстрация:

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

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

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

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

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

Следуя предложению Гранта Вагнерса; вот фрагмент 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);
        }
    });

};

Установите параметр 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

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

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

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

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

html решение:

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

javascript:

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: добавлены методы удаления

Мне удалось это скрыть поле выбора и показать вместо него 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.

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

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

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

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

Используйте это, если ваш выбор имеет класс readonly

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

Или это, если ваш выбор имеет атрибут readonly = "readonly"

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

Вот попытка использовать настраиваемую функцию 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);

});

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

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

Один простой серверный подход - удалить все параметры, кроме той, которую вы хотите выбрать. Таким образом, в 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);

В опции вы можете использовать disabled = "disabled" вместо самого выбора

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

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

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

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

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

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

Просто удалите атрибут disabled перед отправкой формы.

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

Была такая же проблема и обнаружила очень полезное свойство формы - submitdisabledcontrols.

Установите значение True, и отключенные входы теперь POST.

    var selectedOpt;//initialize var
    var newIdForHidden;//initialize var
    $('.disabledOnEdit').focusin(function(){
        selectedOpt = $(this).find(":selected").val();
        newIdForHidden = $(this).attr('id')+'Hidden';
        //alert(selectedOpt+','+newIdForHidden);
        $(this).append('');
        $(this).find('input.hiddenSelectedOpt').attr('id',newIdForHidden).val(selectedOpt);
    });
    $('.disabledOnEdit').focusout(function(){
        var oldSelectedValue=$(this).find('input.hiddenSelectedOpt').val();
        $(this).val(oldSelectedValue);
    });

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

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

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

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

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

Отключить все, кроме выбранной опции:

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

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

Демо

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

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

select[readonly] option{
    display:none;
}

Это приводит к тому, что Select становится серым с красивым курсором "отключить" на hover
. и при выборе список опций «пустой», поэтому вы не можете изменить его значение.

другой способ сделать атрибут readOnly элементу select - использовать css

вы могли бы сделать подобное:

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

ДЕМО

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

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

В коде выше отключает все остальные параметры не выбраны, при этом выбранный параметр остается включенным. При этом выбранный параметр будет включен в данные обратной передачи.

select multiple не так хорошо реагирует на приведенные выше предложения кода. С БОЛЬШОЙ кувалдой и клуджингом я получил вот что:

var thisId = "";
var thisVal = "";
function selectAll(){
    $("#"+thisId+" option").each(function(){
        if (!$(this).prop("disabled"))$(this).prop("selected",true);
    });
    $("#"+thisId).prop("disabled",false);
}
$(document).ready(function(){
    $("select option:not(:selected)").attr('disabled',true);
    $("select[multiple]").focus(function(){
        thisId=$(this).prop("id");
        thisVal=$(this).val();
        $(this).prop("disabled",true).blur();
        setTimeout("selectAll();",200);
    });
});

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

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

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

У меня есть имя - отображение. Тогда мой код будет следующим:

$("document").ready(function(){ 
    var mapping=$("select[name=mapping]").val();
    $("select[name=mapping]").change(function(){
        $("select[name=mapping]").val(mapping);
    });
});

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

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

Если у вас есть тег выбора, который должен быть доступен только для чтения, вы должны, по логике, преобразовать поле выбора в одно «текстовое» поле.

Я говорю логично, потому что это как: «Мне нужно показать значение пользователю»

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

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

Затем, когда вам нужно отобразить это значение, вы должны поместить его в «текстовое поле только для чтения».

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

Я использую «текст», потому что тегу только для чтения не нужен атрибут «тип». Ваше здоровье

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

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

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

Никаких хаков JavaScript не требуется.

То, что я обнаружил, отлично работает с простым 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>

Таким образом, визуальный эффект не изменится, и это будет POST / GET в <FORM>.

Еще проще: добавьте атрибут стиля в свой тег Выбрать:

style = "pointer-events: none;"

Решение с tabindex. Работает с выбором, но также с текстовым вводом.

Просто используйте класс .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" />

Обновлено: с Internet Explorer вам также понадобится этот JS:

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

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

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

Вот некоторые из моих внутренних контроллеров:

        #region Prepare Action Priviledges
        editAuditVM.ExtAuditEditRoleMatrixVM = new ExtAuditEditRoleMatrixVM
        {
            CanEditAcn = _extAuditEditRoleMatrixHelper.CanEditAcn(user, audit),
            CanEditSensitiveDesignation = _extAuditEditRoleMatrixHelper.CanEditSensitiveDesignation(user, audit),
            CanEditTitle = _extAuditEditRoleMatrixHelper.CanEditTitle(),
            CanEditAuditScope = _extAuditEditRoleMatrixHelper.CanEditAuditScope(user, audit)
        };
        #endregion


        #region Prepare SelectLists for Drop Downs
        #region AuditScope List
        IQueryable<SelectListItem> auditScopes = _auditTypesRepo.AuditTypes
            .Where(at => at.AuditTypeClassCode.ToLower() == "e")
            .Select(at => new SelectListItem
            { Text = at.AuditTypeText, Value = at.AuditTypeID.ToString() });
        // Cannot make a select readonly on client side.
        //  So only return currently selected option.
        if (!editAuditVM.ExtAuditEditRoleMatrixVM.CanEditAuditScope)
        {
            auditScopes = auditScopes
                .Where(ascopeId => ascopeId.Value == editAuditVM.ExternalAudit.AuditTypeID.ToString());
        }
        #endregion
        #endregion

What's the best way to emulate the readonly attribute for a select tag, and still get the POST data?

Просто сделайте его полем ввода / текста и добавьте к нему атрибут readonly. Если выбор фактически «отключен», то вы все равно не можете изменить значение, поэтому вам не нужен тег select, и вы можете просто отобразить значение «selected» как текстовый ввод только чтение. Я думаю, что для большинства задач пользовательского интерфейса этого должно быть достаточно.

Поэтому по какой-то причине все упомянутые здесь решения на основе jquery не работали для меня. Итак, вот чистое решение javascript, которое также должно сохранять выбранное значение при выполнении POST.

setDropdownReadOnly('yourIdGoesHere',true/false)

    function setDropdownReadOnly(controlName, state) {
        var ddl = document.getElementById(controlName);

        for (i = 0; i < ddl.length; i++) {
            if (i == ddl.selectedIndex)
                ddl[i].disabled = false;
            else
                ddl[i].disabled = state;
        }
    }

Немного поздно на вечеринку. Но это, кажется, работает для меня безупречно.

select[readonly] {
    pointer-events:none;
}

Мое решение - добавить стиль select[readonly] { pointer-events: none; }, как предлагали здесь многие, а затем добавить этот JS для обработки событий клавиатуры:

$(document).on('keydown', 'select[readonly]', function(e) {
    if (e.keyCode != 9) {
        if (e.preventDefault) {
            e.preventDefault();
        }

        e.returnValue = false;
        e.cancel = true;
    }
});

Это по-прежнему позволяет перемещаться по элементу с помощью табуляции.

input является вашим элементом <select>:

input.querySelectorAll(':not([selected])').forEach(option => {
  option.disabled = true
})

Это сохранит выбор в данных (поскольку он не отключен), и только те option, которые не выбраны, будут отключены, поэтому их нельзя будет выбрать. Результатом является читаемый выбор, который нельзя изменить (=> только для чтения).