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

2019年4月16日

はじめに

最近、フォームの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でも動作させることができます。

試してみてください。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-jQuery
-, , , ,