HTML форма только для чтения SELECT tag / input

Question

Согласно спецификациям HTML, тег select в HTML не имеет атрибута readonly, только атрибут disabled. Поэтому, если вы хотите, чтобы пользователь не мог изменить выпадающий список, вы должны использовать disabled.

Единственная проблема заключается в том, что отключенные вводы HTML-форм не включаются в данные POST / GET.

Как лучше всего эмулировать атрибут readonly для тега select и получать данные POST?

Answer 1

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

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

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

Нет необходимости в взломах JavaScript.

Answer 2

Установите флажок «отключить», если вы планируете сделать его доступным только для чтения, а затем удалите атрибут 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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

Решение с помощью 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();
});

Answer 8

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

};

Answer 9

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

Answer 10

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

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