HTML-форма readonly SELECT тег / ввод


373 принят

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

Если вы повторно используете свой $ ('# mainform'). Submit (function () {$ ('# formdata_container'). Show (); $ ('# formdata'). Html ($ (this) .serialize ()); return false;}); $ ('# enableelect'). click (function () {$ ('# mainform input [name = animal]') .attr ("disabled", true); $ ('# animal-select') .attr (' disabled ', false) .attr (' name ',' animal '); $ (' # enableelect '). hide (); return false;}) ;, вы должны скопировать его значение на скрытый ввод в событии onchange и отключить (или удалить) скрытый ввод.

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

#formdata_container {
    padding: 10px;
}
$('#yourSelect').prop('disabled', true);


110

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

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

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

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

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


90

Вы можете снова включить объект select в submit.

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

Пример с jQuery:

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

    $('#yourForm').on('submit', function() {
        $('input, select').prop('disabled', false);
    });
    
  • Чтобы снова включить его перед отправкой, чтобы включить данные GET / POST:

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

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

readOnly

37
select

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


35

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

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

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

DEMO

JavaScript, HTML,

javascript,html,

440

Ответов: 30


373 принят

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

Если вы повторно используете свой $ ('# mainform'). Submit (function () {$ ('# formdata_container'). Show (); $ ('# formdata'). Html ($ (this) .serialize ()); return false;}); $ ('# enableelect'). click (function () {$ ('# mainform input [name = animal]') .attr ("disabled", true); $ ('# animal-select') .attr (' disabled ', false) .attr (' name ',' animal '); $ (' # enableelect '). hide (); return false;}) ;, вы должны скопировать его значение на скрытый ввод в событии onchange и отключить (или удалить) скрытый ввод.

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

#formdata_container {
    padding: 10px;
}
$('#yourSelect').prop('disabled', true);


110

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

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

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

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

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


90

Вы можете снова включить объект select в submit.

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

Пример с jQuery:

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

    $('#yourForm').on('submit', function() {
        $('input, select').prop('disabled', false);
    });
    
  • Чтобы снова включить его перед отправкой, чтобы включить данные GET / POST:

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

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

readOnly

37
select

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


35

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

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

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

DEMO

JavaScript, HTML,
Похожие вопросы