jQuery：無効化したセレクトボックスの値を送信する方法

深淵な事情があり、

「セレクトボックスで表示している内容があるが、その項目はユーザから直接操作できないようにする。その部分をテキストボックス（ReadOnly）とかに置き換えると影響範囲がめっさ広がるんで、部品を変えずに何とかする。」

というロジックを入れる事になった。

セレクトボックスには ReadOnly属性が無いな。どうするべ。
と悩んで、取った手段がこんな感じ。

実装

「セレクトボックスのイベントを発生させない」という方法で対処しました。

HTML

<select id="my-select-01">
    <option>value01</option>
    <option>value02</option>
    <option>value03</option>
</select>

<input type="submit" id="my-submit-01">

JavaScript

jQuery(document).ready(function($) {

    $('#my-select-01').on('selectstart', false)
    $('#my-select-01').on('contextmenu', false)
    $('#my-select-01').on('keydown', false)
    $('#my-select-01').on('mousedown', false);

}

セレクトボックスを押しても選択内容を表示しないように、イベントをキャンセル。

上記のような問題を解決してくれるプラグインがあるみたいですが、やってる事は結局上記で書いてるような事なので、
「使うはどうせここだけだし、わざわざプラグインとして追加するほどの事でもなくね？」と思って、この方法にした。

＜参考サイト＞

セレクトボックスを変更できないよう固定してかつ値も送信するjQueryプラグイン
query-selection

---

没案

「セレクトボックスを無効化し、送信直前に有効化」
という方法を最初に考えたのですが、最終的には不採用となりました。
理由は、IE では上手く動かなかったため。
　
念のため、書いとく。

HTML

<select id="my-select-01" disabled>
    <option>value01</option>
    <option>value02</option>
    <option>value03</option>
</select>

<input type="submit" id="my-submit-01">

JavaScript

    // 送信時にセレクトボックスを有効化する
    $("#my-submit-01").on('click', function() {
        $("#my-select-01").prop("disabled", false);
    });

disabled にして操作を無効化。
そのままだと値が submit されないので、送信直前に disabled を取り外す、というやり方。