フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【素直になれない】非活性の項目だってsubmitしたい

何がしたい

  • 画面の上のUIでやたらめったら非活性にするくせに、値はしっかり送信して欲しいワガママ要件にカミソリ入りの手紙をごにょごにょ応えたい。
  • 見栄っ張りだからcssいじりたかったけど我慢したんだぜ。ぜ?

スクリーンショット 2018-04-17 23.02.07.png

hidden.html
<div class="radio">
  <input type="radio" name="niku" value="beef" id="niku_1">
  <label for="niku_1"></label>
  <input type="radio" name="niku" value="pork" id="niku_2">
  <label for="niku_2"></label>
  <input type="radio" name="niku" value="chiken" id="niku_3">
  <label for="niku_3"></label>
  <input type="hidden">
</div>
<div class="checkBox">
  <input type="checkbox" value="neko" id="neko">
  <label for="neko">ねこ</label>
  <input type="checkbox" value="tonkatsu" id="tonkatsu">
  <label for="tonkatsu">とんかつ</label>
  <input type="checkbox" value="penguin" id="penguin">
  <label for="penguin">ぺんぎん?</label>
  <input type="checkbox" value="polarBear" id="polarBear">
  <label for="polarBear">しろくま</label>
  <input type="hidden">
</div>
<div class="select">
  <select>
    <option value="">選択してください</option>
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
  <input type="hidden">
</div>
<div class="text">
  <input type="text" value="ムキムキマン">
  <input type="hidden">
</div>
<div class="button">
  <button type="button" name="button" class="toggleButton">TOGGLE!</button>
  <button type="button" name="button" class="getValueButton">GETVALUE!</button>
</div>
  • やたらめったら項目を並べてみる。
  • 全部の項目にhiddenを持たせているのがポイント。
  • ムキムキマン?
main.js
$(document).on('click', '.toggleButton', event => {
  $('div:not(".button")').each((index, element) => {
    const $div = $(element);
    $div.toggleClass('comp-disabled');
    $div.find('input, select').each((index, element) => {
      if($div.hasClass('comp-disabled')){
        $(element).prop('disabled', true);
      } else {
        $(element).prop('disabled', false);
      }
    });
  });
});
  • 前菜。
  • 押したら画面のコンポーネントがとりあえず非活性になる。
  • あと、ラップしているdivにそれっぽいクラスをつけている名采配。
main.js
$(document).on('click', '.getValueButton', event => {
  $('.comp-disabled').each((index, element) => {

    const $div = $(element);
    const $hid = $('[type=hidden]', $div);
    let val = [];

    switch (true) {
      case $div.hasClass('radio'):
      case $div.hasClass('checkBox'):
        $div.children('input:checked').each((index, element) => {
          val.push(element.value);
        });
        break;

      case $div.hasClass('select'):
        val = $div.find('option:selected').val();
        break;

      case $div.hasClass('text'):
        val = $('[type = text]', $div).val();
        break;

      default:
    }
    $hid.val(val);
  });
});
  • まぁ、見ての、通り。

反省

  • ここまで書ききってなんだけど、コンポーネントが活性のときはhiddenを非活性にした方が安全なんじゃないかと思った。
  • 良い子のみんなは、とりあえず動かしてみて要件にあったカスタマイズをして乗り切ろう!
  • 結局全部の値を送るなら、disabledの意味とは、、、とか言わないのが平成の生き方。
[紹介元] jQueryタグが付けられた新着投稿 – Qiita 【素直になれない】非活性の項目だってsubmitしたい

コメント

記事に戻る

コメントを残す