<select>フォームフィールドが無効になっているときに送信されるようにするにはどうすればよいですか？

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

readonly属性は、のためにのみ利用可能であるinputとtextareaフィールドが、それは私が欲しいものは基本的です。それを機能させる方法はありますか？

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

• を無効にする代わりにselect、すべてのを無効にし、optionCSSを使用して選択をグレー表示して、無効になっているように見せます。
• フォームを送信する前に無効になっているすべてのドロップダウンメニューを有効にするように、送信ボタンにクリックイベントハンドラーを追加します。

<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では後にします。いつものように、テストが鍵となります。

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

jQueryコード：

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

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

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

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

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

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

jQueryを使用せずにTresによって提案された同じソリューション

<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のものより柔軟性がありません。

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

    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（ "disabled"）;

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

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

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

ジョーダンの解決策に基づいて、無効にしたい選択の同じ名前と同じ値の非表示入力を自動的に作成する関数を作成しました。最初のパラメーターは、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");

実行可能な解決策を見つけました：選択したものを除くすべての要素を削除します。その後、スタイルを無効に見えるものに変更することもできます。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から引用：

• 読み取り専用要素はフォーカスを受け取りますが、ユーザーが変更することはできません。
• 読み取り専用の要素は、タブナビゲーションに含まれています。
• 読み取り専用要素は成功する可能性があります。

要素が正常である可能性があることを示している場合、それは送信されている可能性があることを意味します。ここに記載されています。