[jQuery]チェックボックスにreadonlyを効かせる

はじめに

最近、フォームのreadonlyを使う機会が増えています。
操作を無効にしながらPOST値を持たせられるのはありがたいです。

[jQuery]「フォーム」「入力」「データ」を無効にする

使っていて気がついたのですが、<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でも動作させることができます。

試してみてください。

今日はこの辺でー