HTML Jquery select要素にdisabledの設定と解除

Question

５つのセレクトボックスがあり、
それらは大→中→小→細→詳細のように
リレーションされていて
大を選ぶと中が。中を選ぶと小が選べるようになっています。

その時に、もし次のセレクトボックスに選べるものが無い場合には
disabledを付与させてクリックさせなくしたいです。

<script type="text/template" id="mst">
  <form id="form-m" class="form-horizontal">

    <div class="row">
      <div class="dai col-md-4">
        <h4>大分類</h4>
        <p>
          <select class="form-control input-sm" id="dai" name="dai">
            <option value=""></option>
            <% for(var i=0; i < 大分類.length; i++){ %>
            <option value="<%- 大分類[i] %>" data-id="<%- ID[i] %>"><%- 大分類[i] %></option>
            <% } %>
          </select>
        </p>
      </div>
      <div class="tyu col-md-4">
        <h4>中分類</h4>
        <p>
          <select class="form-control input-sm" id="tyu" name="tyu"></select>
        </p>
      </div>
      <div class="syou col-md-4">
        <h4>小分類</h4>
        <p>
          <select class="form-control input-sm" id="syou" name="syou"></select>
        </p>
      </div>
    </div>

    <div class="row">
      <div class="syou1 col-md-4">
        <h4>小分類1</h4>
        <p>
          <select class="form-control input-sm" id="syou1" name="syou1"></select>
        </p>
      </div>
      <div class="msyou2 col-md-4">
        <h4>小分類2</h4>
        <p>
          <select class="form-control input-sm" id="syou2" name="syou2"></select>
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12 col-sm-12 col-md-6">
        <div id="id-pager"></div>
      </div>
    </div>

    <table id="table-m" class="table"></table>

  </form>

</script>

<script type="text/template" id="tyu">
  <option value=""></option>
  <% for(var i=0; i < 中分類.length; i++){ %>
  <option value="<%- 中分類[i] %>" data-id="<%- ID[i] %>"><%- 中分類[i] %></option>
  <% } %>
</script>

<script type="text/template" id="syou">
  <option value=""></option>
  <% for(var i=0; i < 小分類.length; i++){ %>
  <option value="<%- 小分類[i] %>" data-id="<%- ID[i] %>"><%- 小分類[i] %></option>
  <% } %>
</script>

<script type="text/template" id="sai">
  <option value=""></option>
  <% for(var i=0; i < 小分類1.length; i++){ %>
  <option value="<%- 小分類1[i] %>" data-id="<%- ID[i] %>"><%- 小分類1[i] %></option>
  <% } %>
</script>

<script type="text/template" id="dtl">
  <option value=""></option>
  <% for(var i=0; i < 小分類2.length; i++){ %>
  <option value="<%- 小分類2[i] %>" data-id="<%- ID[i] %>"><%- 小分類2[i] %></option>
  <% } %>
</script>

$(".a").attr("disabled","disabled");

$(".a").prop('disabled',true);

上記のような方法を試したのですが駄目でした。
いくら探しても見つからないので
分かる方がいましたら、よろしくお願い致します。

Comments

[yambejp]

上位のセレクトボックス選択で、下位のセレクトボックスをajaxで読みにいったりするのでしょうか？それとも５つの要素は常に構成要素は固定なのでしょうか？

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[退会済みユーザー]

yambejpさん　そうですね。画面を開くときに事前に大をajaxで読みにいって、大を選んだらそれに応じてajaxでよみ中のリストを作成する形です。

[退会済みユーザー]

kei344さん　ご指摘ありがとうございます。ただいま、htmlを追加させていただきました

Answer 1

そのどちらの記述でも動作するはずですので、問題は$(".a")が本当に目的のタグを指しているかどうかではなのではないでしょうか。
デベッロパーツール等を利用して、よくご確認ください。

Comments

[退会済みユーザー]

回答ありがとうございます。
しかし、指定先は間違っていませんでした。
.childrenや.find,.parentも試してみましたが全く反応はありませんでした

[退会済みユーザー]

申し訳ありません。
指定先は合っていたのですが、
処理の各場所をまちがえていたようです。

Answer 2

考え方は２つ

• サーバー側でデータをかえすのだからサーバ側でdisableを付加してかえす
• クライアント側の処理にまかせるなら、JSONで受け取っていれば

要素数が0ならdisable、セレクトボックスタグでうけとっているなら、
デフォルト値を持っている前提でoptionの数が1ならdisabled

ということでどうでしょうか？

sample

一応ざっくり書いてみました
ajaxで呼び込む場合、タイミング調整がいるかと思いますが流れ的にこんな感じです。

• 初期状態で選べるのはLLのみ
• LLを選択するとLが選べる、同様にL→M、M→S、S→SS
• 上位の選択肢を--にすると下位の選択肢も--になり、disabledに戻る
• なにかを選んだとして下位の選択肢が１つもなければdisabledのまま

（今回ではSがなにもないのでMを選択してもSはdisabled）

$(function(){
  $('.a').on('change',function(){
    var v=$(this).val();
    if(v==""){
      $(this).nextAll('.a').prop({'disabled':true,"selectedIndex":0});
    }else{
      var flg=$(this).next('.a').children('option').length<=1;
      $(this).next('.a').prop('disabled',flg);
    }
  }).trigger('change');
});

<form>
<select class="a" name="LL">
<option value="">--</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select class="a" name="L">
<option value="">--</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select class="a" name="M">
<option value="">--</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select class="a" name="S">
<option value="">--</option>
</select>
<select class="a" name="SS">
<option value="">--</option>
</select>
</form>

Comments

[退会済みユーザー]

回答ありがとうございます。
クライアント側でjsonデータを受け取っています。
しかし、disabledが反応しません。
試しに直接、disabledを書き込むと動いたので
jqueryではselectボックスにはdisabledの制御は対応していないということなのでしょうか？

[yambejp]

一応sample上げておきます