readonlyのselectをリードオンリーにする方法

selectをreadonlyにしたいと思っている
だからこそリードオンリーにしなくてはならない。

selectのreadonlyってなぜかできないんですよね。。
なので、jsで無理やりやるわけなんですが、こんな感じでどうですか?

readonlyのselectをリードオンリーにする方法

HTML
<select id="pet-select" readonly>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
JS
$('#pet-select').on('click', function(e) {
    if ($(this).attr('readonly') == 'readonly') {
     // 変更前のデータを保存
        $(this).data('oldData', $(this).val());
    }
});
$('#pet-select').on('change', function(e) {
    if ($(this).attr('readonly') == 'readonly') {
     // データを戻す
        $(this).val($(this).data('oldData'));
        return;
    }
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です