目次
はじめに
最近、フォームのreadonlyを使う機会が増えています。
操作を無効にしながらPOST値を持たせられるのはありがたいです。
使っていて気がついたのですが、<input type="checkbox">にreadonlyが効きません。
ブラウザ依存では無さそうなので、そういうものだと思うのですが、それだと意図した使い方ができないので困ってしまいます。
なので今回は、チェックボックスにreadonlyを効かせる方法を書きます。
環境
jQuery: 3.4
使い方
使い方は以下になります。
ソース
$('body').on('click change', ':checkbox[readonly]',function(e){ e.preventDefault(); return false; });
サンプル
See the Pen readonly checkbox good working by カバの樹 (@kabanoki) on CodePen.0
イベントがIEで動作してしまう場合
IE以外なら上記の設定でうまく行くのですが、IEだけは一度だけ動作してしまうようなので、下記の処理を行います。
$(':checkbox').change(function(){ var self = $(this); if(!self.prop('readonly')){ setTimeout(function(){ // イベント },1); } });
まとめ
おそらく動的なreadonlyでなければ悩む人も少ないと思います。
今回のやり方なら動的なreadonlyでも動作させることができます。
試してみてください。
今日はこの辺でー