Как обеспечить отправку поля формы <select>, когда оно отключено?


180

У меня есть selectполе формы, которое я хочу пометить как «только для чтения», так как пользователь не может изменить значение, но значение все еще передается вместе с формой. Использование disabledатрибута не позволяет пользователю изменять значение, но не передает значение вместе с формой.

readonlyАтрибут доступен только для inputи textareaполей, но это в основном то , что я хочу. Есть ли способ заставить это работать?

Я рассматриваю две возможности:

  • Вместо того, чтобы отключить select, отключите все options и используйте CSS, чтобы выделить выбор, чтобы он выглядел как отключенный.
  • Добавьте обработчик событий щелчка к кнопке отправки, чтобы включить все отключенные раскрывающиеся меню перед отправкой формы.

2
извините за позднее присоединение, однако решения, предоставленные @ trafalmadorianworkest лучшими. Он отключает все входы, которые не выбраны. Это также будет работать, если выбрано несколько вариантов. $('#toSelect')find(':not(:selected)').prop('disabled',true);
Абхишек Мадхани,

В качестве альтернативы, вы можете оставить элемент управления отключенным в пользовательском интерфейсе, но получить значение в методе действия: public ActionResult InsertRecord (модель MyType) {if (model.MyProperty == null) {model.MyProperty = Request ["MyProperty"]; }}
beastieboy

Ответы:


118
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Где select_nameимя, которое вы обычно даете <select>.

Другой вариант.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Теперь, с этим, я заметил, что в зависимости от того, какой веб-сервер вы используете, вам, возможно, придется hiddenвводить данные либо до, либо после <select>.

Если моя память мне не изменяет, с IIS вы поставили ее раньше, с Apache - после. Как всегда, тестирование является ключевым.


3
Как это будет зависеть от веб- сервера? Разве это не клиент, который отображает страницу с полем выбора, и, таким образом, в случае конфликта, как это будет клиент, который решает, отправлять значение на сервер или нет?
Илари Каясте

8
Это зависит от того, как сервер обрабатывает несколько входов с одним и тем же именем.
Джордан С. Джонс

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

5
@Jordan: браузеры не отправляют значения отключенных полей на сервер, поэтому они пусты при попытке обработать их на стороне сервера. Если у вас есть скрытое поле с нужным значением и видимые поля отключены, только скрытое поле будет отправлено на сервер. Следовательно, скрытое поле должно создаваться (через JS или серверный код) только тогда, когда видимые поля отключены и нет проблем с приоритетом.
Мэтт ван Андел

1
Это единственный вариант, если вам нужна форма, которая работает без JavaScript.
Андрей

224

Отключите поля, а затем включите их перед отправкой формы:

Код JQuery:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

15
Довольно хорошее решение!
Крис

2
На этом я остановился, в основном потому, что он наименее навязчив.
Джонатан

3
Документы jQuery рекомендуют использовать .prop и .removeProp для «проверено», «выбрано» и «отключено» вместо .attr и .removeAttr, см. http://api.jquery.com/prop/
Джим Бергман

2
Соответствующий бит комментария @ JimBergman - «Свойства обычно влияют на динамическое состояние элемента DOM без изменения сериализованного атрибута HTML. Примеры включают свойство value входных элементов, свойство disabled входов и кнопок или свойство флажка checkbox. Метод .prop () должен использоваться для установки отключенного и проверенного вместо метода .attr (). Метод .val () должен использоваться для получения и установки значения. " - от api.jquery.com/prop
Джошуа Дэнс

2
Ты гений один (Y)
TommyDo

13

Я искал решение для этого, и так как я не нашел решения в этой теме, я сделал свое собственное.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

Проще говоря, вы просто размываете поле, когда фокусируетесь на нем, что-то вроде отключения его, но вы фактически отправляете его данные.


Ничего себе Отличное и простое решение. Спасибо .. +1 от меня :)
Наим Уль Ваххаб

Мне это очень нравится ... в зависимости от взаимодействий в моей форме, элементы становятся включенными / отключенными назад-вперед-назад ... как мне включить «размытое» поле в этом сценарии?
bkwdesign

В Google это выглядит как $ ('# selectbox'). Off ('focus'); сделал бы уловку повторного включения
bkwdesign

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

7

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

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

Спасибо, я нашел ваш самый логически простой. Однако attrследует изменить с prop, будет выглядеть что-то вроде$('#toSelect')find(':not(:selected)').prop('disabled',true);
Abhishek Madhani

6

То же решение, предложенное Tres без использования jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

Это может помочь кому-то понять больше, но, очевидно, менее гибко, чем jQuery.


Но это не хорошо для нескольких селекторов. Может быть, мы можем использовать getElementsByTagName('select')?
Счастливчик

6

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

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

5

Я использую следующий код для отключения параметров в выборках

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

4

Самый простой способ, который я нашел, - создать крошечную функцию javascript, привязанную к вашей форме:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

и вы называете это в вашей форме здесь:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

Или вы можете вызвать его в функции, которую вы используете для проверки вашей формы :)


4

Просто добавьте строку перед отправкой.

$ ( "# XYZ") removeAttr ( "отключено").


2

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


2

Я создал быстрый плагин (только для Jquery), который сохраняет значение в поле данных, пока ввод отключен. Это просто означает, что пока поле программно отключено с помощью jquery с использованием .prop () или .attr () ... тогда доступ к значению с помощью .val (), .serialize () или .serializeArra () всегда будет возвращать значение, даже если отключено :)

Бесстыдная вилка: https://github.com/Jezternz/jq-disabled-inputs


2

Основываясь на решении Jordan, я создал функцию, которая автоматически создает скрытый ввод с тем же именем и тем же значением выбора, который вы хотите сделать недействительным. Первый параметр может быть идентификатором или элементом jquery; второй является логическим необязательным параметром, где «true» отключает, а «false» включает ввод. Если опущен, второй параметр переключает выбор между «включен» и «отключен».

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

параметр 'obj' должен быть объектом jquery
Doglas

1

Я нашел работоспособное решение: удалите все элементы, кроме выбранного. Затем вы можете изменить стиль на что-то, что также выглядит отключенным. Используя jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

0
<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

-8

Другой вариант - использовать атрибут readonly.

<select readonly="readonly">
    ....
</select>

Если значение только для чтения, оно все еще отправляется, поле ввода становится серым, и пользователь не может его редактировать.

Редактировать:

Цитируется с http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

  • Элементы только для чтения получают фокус, но не могут быть изменены пользователем.
  • Элементы только для чтения включены в навигацию по вкладкам.
  • Элементы только для чтения могут быть успешными.

Когда в нем говорится, что элемент может быть успешным, это означает, что его можно отправить, как указано здесь: http://www.w3.org/TR/html401/interact/forms.html#successful-controls


6
Элемент управления НЕ выделен серым цветом, и пользователь МОЖЕТ отредактировать его. Вы не прочитали весь раздел, и я цитирую: «Следующие элементы поддерживают атрибут readonly: INPUT и TEXTAREA».
Карлос Рендон

3
Я знаю, что это старый ответ, но на самом деле это работает. Я не знаю причину многих отрицательных голосов.
Зе Луис,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.