8686


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

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

  * select0(選択可能状態）
  * select1～3(disabled状態）

となっています。

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

[code]

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

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

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

[code]

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

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

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


CC BY-SA 3.0
2015-04-02T07:43:13.623
8685
2015-04-02T08:20:45.547
2015-04-02T08:03:29.253
8000
9123
question
javascript jquery
複数のselect（disabled状態）を、順番に選択可能に


[`.index(element)`](https://api.jquery.com/index/) である要素が集合の何番目かを調べることができます。

[code]

    $('select').change(function(){
        var curno = $('select').index(this);
        $('select').eq(curno + 1).prop('disabled', false);
    });
[/code]

[code]

    <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>
[/code]

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

構造によっては [`.next()`](https://api.jquery.com/next/) も使えるかもしれません。参考までに。


CC BY-SA 3.0
2015-04-02T08:20:45.547
8686
2015-04-02T08:20:45.547
8000
8685
answer