0

プログラムを最近独学で始めたのですが、インターネットで調べながらやってみたい動作が
なかなか上手く動作しません。

下のプログラム単体では動くのですが、
elementslensele_valを『elements1elements2elements3』といった形で増やす 
と動作しなくなってしまいます。

動かしたいプログラムとして、
・『その他』を選択した時のみ、『その他詳細』を選択できるようにしたい。
・同様の動作が1つのフォームで複数箇所あるため、まとめて書きたい
なのですが、どうやってもうまく動きません。

下記、一つだけ書くと動くコードになります。
何卒、ご指導のほどよろしくお願いいたします。

function controlselect() {
    let elements = document.getElementsByClassName("disselect");
    let len = elements.length;
    var sele_val = document.getElementById("other").value;
    if(sele_val === "その他") {
        for (let i = 0; i < len; i++){
            elements.item(i).removeAttribute("disabled");
        }
    }else {
        for (let i = 0; i < len; i++){
            elements.item(i).setAttribute("disabled", true);
        }
    }
}

1 件の回答 1

0

次のような形で実現できないでしょうか:

// 引数で要素のグループを指定する
function controlselect(target) {
  let elements = target.getElementsByClassName("disselect");
  let len = elements.length;
  // id は使えないので class に変更する
  var sele_val = target.getElementsByClassName("other")[0].value;
  if (sele_val === "その他") {
    for (let i = 0; i < len; i++) {
      elements.item(i).removeAttribute("disabled");
    }
  } else {
    for (let i = 0; i < len; i++) {
      elements.item(i).setAttribute("disabled", true);
    }
  }
}

実装例:

function controlselect(target) {
  let elements = target.getElementsByClassName("disselect");
  let len = elements.length;
  var sele_val = target.getElementsByClassName("other")[0].value;
  if (sele_val === "その他") {
    for (let i = 0; i < len; i++) {
      elements.item(i).removeAttribute("disabled");
    }
  } else {
    for (let i = 0; i < len; i++) {
      elements.item(i).setAttribute("disabled", true);
    }
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const targets = ["elements1", "elements2", "elements3"];
  for (let t of targets) {
    const div = document.getElementById(t);
    div
      .getElementsByClassName("other")[0]
      .addEventListener("change", () => controlselect(div));
    controlselect(div);
  }
});
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
  </head>
  <body>
    <div id="elements1">
      <div>
        <select class="other">
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="その他">OTHER</option>
        </select>
      </div>
      <div>
        <input type="text" class="disselect" />
        <input type="text" class="disselect" />
      </div>
    </div>
    <div id="elements2">
      <div>
        <select class="other">
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="その他">OTHER</option>
        </select>
      </div>
      <div>
        <input type="text" class="disselect" />
        <input type="text" class="disselect" />
      </div>
    </div>
    <div id="elements3">
      <div>
        <select class="other">
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="その他">OTHER</option>
        </select>
      </div>
      <div>
        <input type="text" class="disselect" />
        <input type="text" class="disselect" />
      </div>
    </div>
  </body>
</html>

1
  • お返事が遅くなり、大変申し訳ございません。 試してみたところ、イメージどおりの動作しました。 まだまだわからないことばかりで、勉強する身ですがKazuyukiさんのように教える立場までの技術をつけれるようがんばります。 ありがとうございました!
    – Hunt - JPN
    Commented 2021年11月28日 1:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。