ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

jQueryプラグインChosenでクリックして選択できない現象

jQueryプラグインのChosenを適用して動作確認をしたところ、一度非表示にして再度表示にすると、Chosenを適用したセレクトボックスが無効状態のままになることに気がつきました。

表示/非表示の切り替えは、以前書いた記事の方法で行っています。
JavaScript:子孫要素をまとめて無効にする - ソフトウェア開発者の日常

他の要素やChosenを適用していないセレクトボックスでは発生しないので、Chosenを適用していることが影響しています。

どのように表示/非表示と選択肢の切り替えをしているか

Chosenを適用したセレクトボックスの表示/非表示は、ラジオボタンの選択により、切り替えています。
ラジオボタンの選択によっては、表示したまま選択肢だけ切り替えるときがあります。
動作としては、

  1. ラジオボタンの選択に従い、非表示および無効にする要素に対して、非表示および無効を適用する。
  2. 選択肢を切り替えるなど表示前の処理を行う。
  3. 表示および有効にする要素に対して、表示および有効を適用する。

という順番で処理しています。

f:id:AJYA:20181118061550p:plain
unsplash-logoPankaj Patel

対処方法

原因を探してあれこれ試していると、Chosenを適用したセレクトボックスを、表示状態から選択肢を切り替えると、無効状態だったのが有効状態になること気がつきました。
もしかしてと思い、これまで上記の順番で処理していたのを

  1. ラジオボタンの選択に従い、非表示および無効にする要素に対して、非表示および無効を適用する。
  2. 表示および有効にする要素に対して、表示および有効を適用する。
  3. 選択肢を切り替えるなど処理を行う。

という順番に変更したところ、Chosenを適用したセレクトボックスが無効状態のままにならなくなりました。

表示したまま選択肢の切り替えはしないと、上手く動作してくれないようです。
jQueryプラグインChosenで選択肢の動的変更方法 - ソフトウェア開発者の日常