jqueryでセレクタ毎に非表示にしたり非活性にしたり複数のアクションを行いたい

Question

以前、こちらで質問させていただき、完成かと思われたのですが、
さらにもう一つ指示が増え、困っています。

以前の質問: jqueryで複数のselectの情報から表示/非表示を決定したい
https://teratail.com/questions/158504

今回はここに、特定の選択枠が選択された場合、隣のセレクタ を活性化させるというものを追加したいと考えています。

現状のコード

<div class="select-box">
<select name="" id="select1">
<option value="">初期状態</option>
<option value="選択１">選択１</option>
<option value="選択2">選択2</option>
</select>
</div>

<div class="select-box">
<select name="" id="select2">
<option value="">初期状態</option>
<option value="選択１">選択2</option>
<option value="特定の選択肢">特定の選択肢</option>
</select>
</div>

<div class="select-box" id="selectNumber">
<select name="" id="select3">
<option value="">初期状態</option>
<option value="選択１">選択１</option>
<option value="選択2">選択2</option>
</select>
</div>

<div class="box"></div>

それぞれのセレクタ で何かしら選択した場合はboxを表示し、さらに
特定の選択肢を選択した場合はselect３のセレクタ が活性化するというところにもっていきたいのです。

$(function(){
  $('#box').hide();
  $("#selectNumber").prop('disabled', true).css("opacity",0.6);
  $('.select-box select').on('change',function(){
    console.log($('.select-box').filter(function(){return $(this).val()!=="";}).length);
    $('#box').toggle($('.select-box select').filter(function(){return $(this).val()!=="";}).length>0)
  });

  $('#select2').change(function(){
      var extraction_val = $("#select2").val();
    if(extraction_val == "特定の選択肢") {
            $("#selectNumber select").prop('disabled', false).css("opacity",1);
        }
        else {
            $("#selectNumber select").prop('disabled', true).css("opacity",0.6);
        }
    })
});

上記のように書いたのですが、boxの表示非表示はできるのですが、特定の選択肢を選んだ際にセレクタ が活性化されません。
select-boxで干渉していたりするのが原因なのでしょうか？

なにかヒントでもいただけると大変助かります。
よろしくお願いします。

Comments

[yambejp]

仮にselect1は未選択でselect2で「特定の選択肢」を選択した場合はboxは表示するのですか？

[M.Takeshita]

質問・回答いつもありがとうございます！はい。いづれのセレクタ が稼働してもboxは表示され、特定の選択肢でも表示されますがその時だけは、select3にも作用する感じです。

Answer 1

とりあえず

<script>
$(function(){
  $('.select-box select').on('change',function(){
    $('.box').toggle($('.select-box select').filter(function(){
      return $(this).val()!=="";
    }).length>0);
  });
  $('#select2').on('change',function(){
    $('#select3').prop('disabled',$(this).val()!="特定の選択肢");
  }).trigger('change');
});
</script>
<div class="select-box">
<select name="" id="select1">
<option value="">初期状態</option>
<option value="選択１">選択１</option>
<option value="選択2">選択2</option>
</select>
</div>

<div class="select-box">
<select name="" id="select2">
<option value="">初期状態</option>
<option value="選択１">選択2</option>
<option value="特定の選択肢">特定の選択肢</option>
</select>
</div>

<div class="select-box" id="selectNumber">
<select name="" id="select3">
<option value="">初期状態</option>
<option value="選択１">選択１</option>
<option value="選択2">選択2</option>
</select>
</div>

<div class="box">box</div>

別解

select1,select2が非選択、select3が非活性の場合boxを表示しない

$(function(){
  $('#select2').on('change',function(){
    $('#select3').prop('disabled',$(this).val()!="特定の選択肢");
  });
  $('.select-box select').on('change',function(){
    $('.box').toggle($('.select-box select:not(:disabled)').filter(function(){
      return $(this).val()!=="";
    }).length>0);
  }).eq(1).trigger('change');
});

Comments

[yambejp]

まずselect2を特定の選択肢にしたあとselect3が活性化して選択1にします。
その後select2を未選択に戻すとselect3は選択１のまま非活性になります
さてそのときはselect1,select2は未選択、select3は非活性ですが
boxは表示されるのでしょうかされないのでしょうか？

[M.Takeshita]

おお。なるほど。データ送信が最終目的となるので、選択肢が結果的に未選択であればselect３の選択肢も初期化となります。
そしてboxは非表示ですね。

...禿げそうです。

[yambejp]

追記しておきました

[M.Takeshita]

遅くなりましてすいません。素早いレスポンスで非常に助かりました。
最終的に別解＋cssで解決いたしました。本当にありがとうございました！