セレクト、ラジオボタン、チェックボックスをreadonlyにする方法

セレクトボックス、チェックボックス、ラジオボタンreadonlyにする方法ついて解説します。

Contents

各フォーム要素にreadonlyにをつけてみる
問題
解決
ラベルで囲んでいる場合の問題

各フォーム要素にreadonlyにをつけてみる

まずはすべての普通にフォーム要素にreadonlyを付けたときの変化について見てみます。
わかりやすいようにreadonlyの要素の背景をグレーにします。

<style>
    [readonly]{
        background-color:#E0E0E0!important;
        opacity: 0.6!important;
    }
</style>
<form>
    <input type="text" value="りんご" readonly><br>
    <textarea readonly>みかん</textarea><br>
    <select readonly>
        <option>りんご</option>
        <option>みかん</option>
    </select>
    <br>
    <input type="checkbox" name="fruits[]" readonly checked>りんご
    <input type="checkbox" name="fruits[]" readonly>みかん
    <br>
    <input type="radio" name="fruits" readonly checked >りんご
    <input type="radio" name="fruits" readonly>みかん
</form>

下記の各フォーム要素をクリックしてみていただくとわかると思うのですが、inputとtextareaは編集不可になっていますが、select、radio、chekboxはreadonlyが適用されず、編集できてしまいます。

問題

同一フォームの内の要素をすべて編集不可にしたい場合はdisabled属性をつければ解決するのですが、部分的に編集不可にしたい場合disabledを使用すると値をPOSTできずに困る。という問題があります。なんとかセレクトボックスなどもreadonlyにしたい、そんなときの解決方法が下記です。

解決

readonlyを持つ要素をクリック不可にします。

    select[readonly],
    input[type="radio"][readonly],
    input[type="checkbox"][readonly]{
        pointer-events:none;
    }

下の各要素をクリックするとセレクトボックス、ラジオボタン、チェックボックスも編集不可になっていることがわかると思います。

ラベルで囲んでいる場合の問題

下記のようにラジオボタンやチェックボックスをラベルで囲んでいる場合、先ほどの対応だけではカバーできません。ラベルのクリックで値を切り替えられてしまうからです。

<label><input type="checkbox" name="fruits[]" readonly checked>りんご</label>
<label><input type="checkbox" name="fruits[]" readonly>みかん</label>
<br>
<label><input type="radio" name="fruits" readonly checked >りんご</label>
<label><input type="radio" name="fruits" readonly>みかん</label>

そういう場合は先ほどの対応に加えて、下記のようにすると解決できます。
labelを後ろに持っていきforでつないで、CSSで隣接セレクタを使用してクリック不可にします。

<style>
    [readonly] + label{
        pointer-events:none;
    }
</style>
<input type="checkbox" name="fruits[]" readonly checked id="fruits-radio"><label for="fruits-radio">りんご</label>
<input type="checkbox" name="fruits[]" readonly id="fruits-radio02"><label for="fruits-radio02">みかん</label>
<br>
<input type="radio" name="fruits" readonly checked id="fruits-check"><label for="fruits-check">りんご</label>
<input type="radio" name="fruits" readonly id="fruits-check02"><label for="fruits-check02">みかん</label>

以上、セレクトボックス、チェックボックス、ラジオボタンreadonlyにする方法でした。

最後に全コードを載せておきます。

<style>
    body,select{
        font-size: 22px;
    }
    select[readonly],
    input[type="radio"][readonly],
    input[type="checkbox"][readonly]{
        pointer-events:none;
    }
    [readonly]{
        background-color:#E0E0E0;
        opacity: 0.6;
    }
    [readonly] + label{
        pointer-events:none;
    }
</style>
<form>
    <input type="text" readonly value="りんご"><br>
    <textarea readonly>みかん</textarea><br>
    <select readonly>
        <option>りんご</option>
        <option>みかん</option>
    </select>
    <br>
    <input type="checkbox" name="fruits[]" readonly checked id="fruits-check"><label for="fruits-check">りんご</label>
    <input type="checkbox" name="fruits[]" readonly id="fruits-check02"><label for="fruits-check02">みかん</label>
    <br>
    <input type="radio" name="fruits" readonly checked id="fruits-radio"><label for="fruits-radio">りんご</label>
    <input type="radio" name="fruits" readonly id="fruits-radio02"><label for="fruits-radio02">みかん</label>
</form>