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

Question

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

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

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

Answer 1

Вы должны оставить элемент select disabled, но также добавить еще один скрытый 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>

Answer 2

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

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

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

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

Демо

Answer 3

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

РЕДАКТИРОВАТЬ : т.е., обычно отключая тег 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);
});

Answer 4

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

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

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

DEMO

Answer 5

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

Answer 6

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

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

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

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

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

Answer 7

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

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

select[readonly] option{
    display:none;
}

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

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

Еще проще: добавьте атрибут стиля к вашему тегу select :

style="pointer-events: none;"