セレクト、ラジオボタン、チェックボックスをreadonlyにする方法【CSSのみでOK】

セレクトボックス、チェックボックス、ラジオボタン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にしたい、そんなときの解決方法が下記です。




connaiconnai

解決

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>

コメント

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