web-dev-qa-db-ja.com

<select>フォームフィールドが無効なときに送信されるようにする方法は？

ユーザーが値を変更できないので、「読み取り専用」としてマークするselectフォームフィールドがありますが、値はまだフォームで送信されます。 disabled属性を使用すると、ユーザーは値を変更できませんが、フォームで値を送信することはできません。

readonly属性は、inputおよびtextareaフィールドでのみ使用できますが、基本的にはそれが必要です。それを機能させる方法はありますか？

私が検討している2つの可能性は次のとおりです。

  • selectを無効にする代わりに、すべてのoptionsを無効にし、CSSを使用して選択をグレーアウトし、無効になっているように見えます。
  • フォームを送信する前に無効なドロップダウンメニューをすべて有効にするように、クリックイベントハンドラーを送信ボタンに追加します。
javascripthtmlcssformshtml-select
170
Marquis Wang
<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" />

これで、使用しているWebサーバーによっては、hidden入力を<select>の前または後に配置する必要があることに気付きました。

IISで記憶が正しく機能する場合は、前に配置し、Apacheでは後に配置します。いつものように、テストが重要です。

113
Jordan S. Jones

フォームを送信する前に、フィールドを無効にしてから有効にします。

jQueryコード：

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

私はこれに対する解決策を探していましたが、このスレッドで解決策を見つけられなかったため、自分で解決しました。

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

シンプルです。フィールドに焦点を合わせたときにフィールドをぼかすだけで、無効にするようなものですが、実際にはデータを送信します。

12
Jean Paul Rumeau

選択フィールドの：inputセレクターでは機能しません。これを使用してください：

    jQuery(function() {

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

    });
6
chhalpha

以前の選択ボックスに基づいて選択した値をユーザーが変更できないようにしたかったという点で、少し異なるシナリオに直面しました。私がやったことは、選択ボックスで選択されていない他のすべてのオプションを無効にすることでした

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

次のコードを使用して、選択のオプションを無効にします

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

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のものよりも柔軟性が低いです。

5
Marco Demaio

送信する前に行を追加するだけです。

$（ "＃XYZ"）。removeAttr（ "disabled"）;

4
PPB

私が見つけた最も簡単な方法は、フォームに関連付けられた小さなjavascript関数を作成することでした：

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

ここでフォームで呼び出します：

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

または、フォームをチェックするために使用する関数で呼び出すことができます:)

3
Alex PARISOT

または、JavaScriptを使用して選択の名前を変更し、無効に設定します。この方法では、選択は送信されますが、チェックしていない名前を使用します。

2
Byron Whitlock

入力が無効になっている間、データフィールドに値を保存するクイック（Jqueryのみ）プラグインを作成しました。これは、フィールドが.prop（）または.attr（）...を使用してjqueryを介してプログラムで無効にされている限り、.val（）、. serialize（）または.serializeArra（）によって値にアクセスすると常に返されることを意味します。無効にしても値:)

恥知らずなプラグイン： https://github.com/Jezternz/jq-disabled-inputs

1
Josh Mc

実行可能な解決策を見つけました：選択したものを除くすべての要素を削除します。その後、スタイルを無効に見えるものに変更できます。 jQueryの使用：

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

ヨルダンのソリューションに基づいて、無効にしたい選択と同じ名前と同じ値を持つ非表示の入力を自動的に作成する関数を作成しました。最初のパラメーターは、idまたはjquery要素です。 2番目はブール値のオプションパラメータで、「true」は入力を無効にし、「false」は入力を有効にします。省略した場合、2番目のパラメーターは、選択を「有効」と「無効」の間で切り替えます。

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");
1
Doglas
<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");
}
0
Thxopen