Як забезпечити подання поля <вибору>, коли воно вимкнено?

У мене є selectполе форми, яке я хочу відзначити як "тільки для читання", оскільки в користувачеві не можна змінювати значення, але значення все одно подається разом із формою. Використання disabledатрибуту не дозволяє користувачеві змінювати значення, але не подає значення за допомогою форми.

readonlyАтрибут доступний тільки для inputі textareaполів, але це в основному те , що я хочу. Чи є якийсь спосіб налагодити це?

Дві можливості, які я розглядаю, включають:

• Замість того, щоб вимкнути функцію select, вимкніть всі елементи options та використовуйте CSS, щоб виділити сірий вибір, щоб він виглядав як його відключений.
• Додайте обробник подій клацання до кнопки надсилання, щоб він ввімкнув усі вимкнено меню, що випадає, перш ніж надсилати форму.

<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 ви ставите її після. Як завжди, тестування є ключовим.

Вимкніть поля, а потім увімкніть їх до надсилання форми:

Код jQuery:

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

Я шукав рішення для цього, і оскільки я не знайшов рішення в цій темі, я зробив своє.

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

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

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

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

Це ж рішення, запропоноване 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.

він не працює з селектором введення для вибраних полів, використовуйте це:

    jQuery(function() {

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

    });

Я використовую наступний код для відключення параметрів у виділеннях

<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');
});

Найпростіший спосіб, який я знайшов, - створити крихітну функцію JavaScript, прив’язану до вашої форми:

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

і ви називаєте це у своїй формі тут:

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

Або ви можете зателефонувати в функцію, яку ви використовуєте для перевірки форми :)

Просто додайте рядок перед надсиланням.

$ ("# XYZ"). RemoveAttr ("вимкнено");

Або скористайтеся деяким JavaScript, щоб змінити ім'я вибраного та встановити його на вимкнено. Таким чином, вибір все ще подається, але використовуючи ім’я, яке ви не перевіряєте.

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

Безсоромний штекер: https://github.com/Jezternz/jq-disabled-inputs

На основі рішення Йордану я створив функцію, яка автоматично створює прихований вхід з тим же ім'ям і тим самим значенням вибору, який ви хочете стати недійсним. Першим параметром може бути ідентифікатор або елемент 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");

Я знайшов ефективне рішення: видаліть усі елементи, крім вибраного. Потім ви можете змінити стиль на щось, що також виглядає вимкненим. Використання jQuery:

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

<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");
}

Інший варіант - використовувати атрибут 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