2

こんにちは。よろしくお願いいたします。
現在、jqueryを使って下記のような動きを試みています。

4つのselectタグ(0番~3番とします)があり、デフォルトでは

  • select0(選択可能状態)
  • select1~3(disabled状態)

となっています。

これを、0が選択されたら次の1を選択可能に、1が選択されたら次の2を・・・と順番に選んでいけるようにしたく、下記のようにIDを指定して個別に書く方法ではなんとかできるようになりました。

$("#select0").change(function(){ $("#select1").removeAttr("disabled"); });
$("#select1").change(function(){ $("#select2").removeAttr("disabled"); });
...

上記の書き方でselect3まで繰り返して書いています。

これを、eq: などを使ってもっとスマートに書きたいのですが変数?の書き方がわからず困っています。

$("select").change(function(){
    $("select").eq(ここに自身の番号に+1した番号).removeAttr("disabled");
});

こんな感じでまとめることは可能でしょうか?
当方、javascript自体あまりよくわかっていない状態です。
どなたかご教示いただければと思います。

よろしくお願いいたします。

1
  • unarist様 ご回答ありがとうございます。 ご教示いただいた内容で思い通りの動きができました!感謝です。 今後のことも考えて親要素で絞って使おうと思います。 本当にありがとうございました。
    – 失恋中
    2015年4月2日 9:03

1 件の回答 1

1

.index(element) である要素が集合の何番目かを調べることができます。

$('select').change(function(){
    var curno = $('select').index(this);
    $('select').eq(curno + 1).prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select><option>-</option><option>some</option></select>
<select disabled><option>-</option><option>some</option></select>
<select disabled><option>-</option><option>some</option></select>
<select disabled><option>-</option><option>some</option></select>

ただ $('select') としてしまうと関係ない <select> が増えたときに困るので、親要素で絞り込んだり、classを付けたほうがいいような気がします。

構造によっては .next() も使えるかもしれません。参考までに。

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

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