【僕らはいつだって未完成】javascriptでformの非活性とか非表示とかやってみたい

何がしたいのさ

  • 例えばセレクトボックスで特定の値が選択されたり、ラジオボタンのある項目が選択された時だけ、入力フォームを非活性にしたり非表示にしたかったりするのです。
  • 職場で見る用だから品質気にしない制作途中なので色々ツッコミどころあると思うんですがグッと堪えてください。
AreaControl.js
(function($) {
  // data-disabled属性、data-hidden属性には対象エリアのクラス名(.class)が設定されている想定
  // コンポーネントそのもののクラスではなく、エリア(divなど)で対応できるように工夫すること
  $.fn.AreaControl = function() {
    return this.each((index, element) => {
      const self = $(element);
      // なんとなくセクションにしたけど、もう少し範囲狭めてもいいかも
      const $section = self.closest('section');
      let $disabledArea = $();
      let $hiddenArea = $();

      self.on({
        // change以外でイベントを拾う可能性もあり
        change : event => {
          switch (event.target.type) {
            case 'radio':
            case 'checkbox':
              radioAndCheckBoxStandBy(event.target);
              break;
            case 'select-one':
              comboBoxStandBy();
              break;
            default:
          };
          initSection();
          if($disabledArea) {
            executeDisable();
          };
          if($hiddenArea) {
            executeHidden();
          };
        },
        blur : event => {
          console.log('blur!');
        }
      });
      // 対象範囲内の初期化
      const initSection = () => {
        $('input', $section).each((index, element) => {
          $(element).removeAttr('disabled');
          $(element).fadeIn(500);
        });
      };
      // 非活性制御の実行部(作り込み必要)
      const executeDisable = () => {
        $('input', $disabledArea).each((index, element) => {
          $(element).attr('disabled', true);
        });
      };
      // 非表示制御の実行部(同上)
      const executeHidden = () => {
        $('input', $hiddenArea).each((index, element) => {
          $(element).fadeOut(500);
        });
      };
      // コンボボックスの場合の対象クラスの設定
      const comboBoxStandBy = () => {
        $disabledArea = $('option:selected', self).attr('data-disabled');
        $hiddenArea = $('option:selected', self).attr('data-hidden');
      };
      // ラジオ、チェックボックスの場合の設定
      const radioAndCheckBoxStandBy = obj => {
        if(obj.checked) {
          $disabledArea = $(obj).attr('data-disabled');
          $hiddenArea = $(obj).attr('data-hidden');
        };
      };
    });
  };
})(jQuery);

所感

  • こういう処理が共通化できれば一番いいんだろうけど、なかなかどうして難しいですね。(大人を説得するのが)
  • そして探してないけど誰かがもう、イケてるプラグインを絶対作ってるはずなんだ。絶対そうだ。僕はわかっててやってるんだ。気がついていないフリすらしないんだ。

※本当に製作途中なので良い子のみんなはアテにしないこと!先生との約束よ!

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.