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

Відповідно до специфікацій HTML, selectтег у HTML не має readonlyатрибута, а лише disabledатрибут. Тож якщо ви хочете утримати користувача від зміни випадаючого меню, вам доведеться скористатися disabled.

Єдина проблема полягає в тому, що відключені вхідні форми HTML не включаються до даних POST / GET.

Який найкращий спосіб емулювати readonlyатрибут для selectтегу та все-таки отримати дані POST?

Ви повинні зберегти selectелемент, disabledале також додати ще один прихований inputз тим же ім'ям та значенням.

Якщо ви повторно ввімкнете свій SELECT, вам слід скопіювати його значення на прихований вхід у події зміни та відключити прихований вхід (або вилучити його).

Ось демонстрація:

$('#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>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

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

Демо

Ви можете повторно включити обраний об’єкт при надсиланні.

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

Приклад з jQuery:

• Щоб вимкнути це:

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

• Щоб повторно ввімкнути його перед надсиланням, щоб включити дані GET / POST:

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

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

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

Ще один спосіб зробити readOnlyатрибут selectелементу - це за допомогою використанняcss

ви можете зробити так, як:

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

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

Просте рішення jQuery

Використовуйте це, якщо ваш вибір має readonlyклас

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

Або це якщо ваш вибір має readonly="readonly"атрибут

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

Просте рішення CSS:

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

select[readonly] option{
    display:none;
}

Це призводить до того, що виберіть "Сірий" із приємним курсором "відключити" при наведенні курсору,
а при виборі список параметрів "порожній", тому ви не можете змінити його значення.

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

зауважте, однак, що це функція HTML 4.0, тобто 6,7,8 бета-1, схоже, не поважає цього.

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

Це найкраще рішення, яке я знайшов:

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

Код вище відключає всі інші параметри, не вибрані, зберігаючи вибраний параметр. Вибраний варіант перетворить їх у дані після повернення.

Я знаю, що це занадто пізно, але це можна зробити за допомогою простого CSS:

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

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

Ні хакі JavaScript не потрібні.

Ще простіше: додайте атрибут стилю до вибраного тегу:

style="pointer-events: none;"

Це найпростіше і найкраще рішення. Ви встановите atol readolny attr на свій вибір або будь-який інший attr, як-отчитано тільки для даних, і зробіть наступне

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

Встановіть функцію вимкнено, коли ви плануєте її доступ лише для читання, а потім видаліть відключений атрибут безпосередньо перед поданням форми

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

Це знаходить усі елементи вибору з атрибутом readonly, потім знаходить всі параметри всередині тих виділених елементів, які не вибрані, потім він їх приховує та відключає.

Важливо розділити запит jquery на 2 з міркувань продуктивності, тому що jquery читає їх справа наліво, код:

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

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

Один простий підхід на стороні сервера - це видалити всі параметри, крім того, який потрібно вибрати. Таким чином, у Zend Framework 1.12, якщо елемент $ є 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');

Розчин за допомогою табіндексу. Працює з вибраними, але й текстовими введеннями.

Просто використовуйте клас .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();
});

Виходячи з пропозиції Грант Вагнерс; ось фрагмент 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), це змінити внутрішній HTMLML <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>

Таким чином, ніяких візуальних ефектів не зміниться, і це ПОСТІЄТЬСЯ / GET в межах <FORM>.

Замість вибору ви можете вимкнути всі параметри, крім поточного обраного. Це створює зовнішній вигляд робочого випадаючого меню, але правильним вибором є лише варіант, який ви хочете прийняти.

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

редагувати: додано методи видалення

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

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

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

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

Якщо спадне меню вибору є лише для читання з моменту народження і його взагалі не потрібно змінювати, можливо, вам слід скористатися іншим елементом керування? Як просте <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>

Ви можете зробити подібні без властивостей розширення, використовуючи змінну 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);

});