2022/3/15セレクトボックス、チェックボックス、ラジオボタンreadonlyにする方法ついて解説します。各フォーム要素にreadonlyにをつけてみるまずはすべての普通にフォーム要素にreadonlyを付けたときの変化について見てみます。わかりやすいようにreadonlyの要素の背景をグレーにします。readonly>みかん</form>下記の各フォーム要素をクリックしてみていただくとわかると思うのですが、inputとtextareaは編集不可になっていますが、select、radio、chekboxはreadonlyが適用されず、編集できてしまいます。同一フォームの内の要素をすべて編集不可にしたい場合はdisabled属性をつければ解決するのですが、部分的に編集不可にしたい場合disabledを使用すると値をPOSTできずに困る。なんとかセレクトボックスなどもreadonlyにしたい、そんなときの解決方法が下記です。解決readonlyを持つ要素をクリック不可にします。}下の各要素をクリックするとセレクトボックス、ラジオボタン、チェックボックスも編集不可になっていることがわかると思います。下記のようにラジオボタンやチェックボックスをラベルで囲んでいる場合、先ほどの対応だけではカバーできません。ラベルのクリックで値を切り替えられてしまうからです。readonly>みかん</label>そういう場合は先ほどの対応に加えて、下記のようにすると解決できます。labelを後ろに持っていきforでつないで、CSSで隣接セレクタを使用してクリック不可にします。みかん以上、セレクトボックス、チェックボックス、ラジオボタンreadonlyにする方法でした。最後に全コードを載せておきます。Posts関連記事は見つかりませんでした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。views2021/1/202023/5/13タイトルとURLをコピーしました。