Jak upewnić się, że pole formularza <select> jest przesyłane, gdy jest wyłączone?

Mam selectpole formularza, które chcę oznaczyć jako „tylko do odczytu”, ponieważ użytkownik nie może modyfikować wartości, ale wartość jest nadal przesyłana wraz z formularzem. Użycie tego disabledatrybutu uniemożliwia użytkownikowi zmianę wartości, ale nie przesyła wartości wraz z formularzem.

readonlyAtrybut jest dostępny tylko dla inputi textareapól, ale to w zasadzie to, co chcę. Czy jest jakiś sposób, żeby to zadziałało?

Rozważam dwie możliwości:

• Zamiast selectwyłączać, wyłącz wszystkie optioni użyj CSS, aby wyszarzyć zaznaczenie, aby wyglądało na wyłączone.
• Dodaj moduł obsługi zdarzeń kliknięcia do przycisku przesyłania, aby umożliwić włączenie wszystkich wyłączonych menu rozwijanych przed przesłaniem formularza.

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

Gdzie select_namejest nazwa, którą normalnie byś nadał <select>.

Inna opcja.

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

Teraz z tym jednym zauważyłem, że w zależności od używanego serwera WWW może być konieczne wprowadzenie hiddendanych wejściowych przed lub po <select>.

Jeśli moja pamięć służy mi poprawnie, w IIS umieścisz ją wcześniej, w Apache umieścisz ją później. Jak zawsze testowanie jest kluczowe.

Wyłącz pola, a następnie włącz je przed przesłaniem formularza:

Kod jQuery:

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

Szukałem rozwiązania tego problemu, a ponieważ nie znalazłem rozwiązania w tym wątku, zrobiłem to sam.

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

Proste, po prostu zamazujesz pole, gdy się na nim skupisz, coś w rodzaju wyłączenia, ale w rzeczywistości wysyłasz jego dane.

Miałem do czynienia z nieco innym scenariuszem, w którym chciałem tylko nie pozwolić użytkownikowi na zmianę wybranej wartości na podstawie wcześniejszego pola wyboru. Skończyło się to na wyłączeniu wszystkich innych niewybranych opcji w selectbox przy użyciu

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

To samo rozwiązanie zaproponowane przez Tres bez użycia 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>

Może to pomóc komuś lepiej zrozumieć, ale oczywiście jest mniej elastyczny niż jQuery.

nie działa z selektorem: input dla wybranych pól, użyj tego:

    jQuery(function() {

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

    });

Używam następnego kodu do wyłączania opcji w selekcjach

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

Najprostszym sposobem, jaki znalazłem, było stworzenie małej funkcji javascript powiązanej z twoją formą:

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

i nazywacie to tutaj w formularzu:

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

Lub możesz to wywołać w funkcji, której używasz do sprawdzania formularza :)

Po prostu dodaj wiersz przed przesłaniem.

$ („# XYZ”). RemoveAttr („disabled”);

Lub użyj JavaScript, aby zmienić nazwę zaznaczenia i ustawić go na wyłączony. W ten sposób zaznaczenie jest nadal przesyłane, ale przy użyciu nazwy, której nie sprawdzasz.

Podniosłem szybką wtyczkę (tylko Jquery), która zapisuje wartość w polu danych, gdy wejście jest wyłączone. Oznacza to tylko, że dopóki pole jest wyłączane programowo poprzez jquery za pomocą .prop () lub .attr () ... to dostęp do wartości przez .val (), .serialize () lub .serializeArra () zawsze zwróci właściwość wartość, nawet jeśli wyłączona :)

Bezwstydna wtyczka: https://github.com/Jezternz/jq-disabled-inputs

W oparciu o rozwiązanie Jordana stworzyłem funkcję, która automatycznie tworzy ukryte dane wejściowe o tej samej nazwie i tej samej wartości zaznaczenia, które chcesz unieważnić. Pierwszym parametrem może być id lub element jquery; drugi to logiczny parametr opcjonalny, w którym „prawda” wyłącza, a „fałsz” włącza dane wejściowe. Jeśli zostanie pominięty, drugi parametr przełącza wybór pomiędzy „włączony” i „wyłączony”.

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

Znalazłem wykonalne rozwiązanie: usuń wszystkie elementy oprócz wybranego. Następnie możesz zmienić styl na coś, co również wygląda na wyłączone. Korzystanie z 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");
}

Inną opcją jest użycie atrybutu tylko do odczytu.

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

W przypadku odczytu tylko wartość jest nadal przesyłana, pole wprowadzania jest wyszarzone i użytkownik nie może go edytować.

Edytować:

Cytat z http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

• Elementy tylko do odczytu są aktywowane, ale użytkownik nie może ich modyfikować.
• Elementy tylko do odczytu są zawarte w nawigacji po kartach.
• Elementy tylko do odczytu mogą się powieść.

Kiedy mówi, że element może się powieść, oznacza to, że można go przesłać, jak stwierdzono tutaj: http://www.w3.org/TR/html401/interact/forms.html#successful-controls