スポンサーリンク

【jQuery】無効化したセレクトボックスの値を送信

JS745_chokoring_TP_V4 JavaScript

深淵な事情があり、

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

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

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

Ver 1:セレクトボックスを無効化し、送信直前に有効化

最終的には不採用となりました。

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 を取り外す、というやり方。
が、Chrome、FireFox、Safari、Edge では上手くいったものの、IE では上手く動かなかった。
なので、別の方法で対応。

Ver 2:セレクトボックスのイベントを発生させない

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

}

セレクトボックスを押しても、選択内容を表示しないように、イベントをキャンセル。
また、select の disabled は取り払った。

この方法なら IEでも行けました。

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

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

コメント

タイトルとURLをコピーしました