【jQuery】selectboxが複数ある状態で、選択できるselectboxの数を制限したい

いつもお世話になっております。初めて質問させていただきます。

###前提・実現したいこと
tableに複数のselectboxが存在している状態で、
オプションが「設定しない」でない物の数をカウントし、
2つ以上「選択肢●●」があれば、他のselectboxを動かなくしたい

参考イメージ

checkboxを使った、チェックが2つ以上であれば、
他のチェックボックスを選択できないようにする、という動作は、
http://kachibito.net/snippets/limit-checkbox-amount
こちらのサイト様を参考に上手く動いたのですが、
selectboxでの応用ができずご教授いただければと思います。

下記のソースはhtmlになります。

###該当のソースコード

html
1<table class="">
2  <thead>
3    <tr>
4      <th>
5        <p class="ml2">
6        <span class="txac"><span>セレクトボックス</span><br>
7          <span class="flag_cnt"></span>2/2</span></p>
8      </th>
9    </tr>
10  </thead>
11  <tbody>
12    <tr class="">
13      <td>
14        <select class="form-parts" name="select">
15          <option value="default" selected>設定しない</option>
16          <option value="option01">選択肢01</option>
17          <option value="option02">選択肢02</option>
18          <option value="option03">選択肢03</option>
19        </select>
20      </td>
21    </tr>
22    <tr class="color">
23      <td>
24        <select class="form-parts" name="select">
25          <option value="default">設定しない</option>
26          <option value="option01" selected>選択肢01</option>
27          <option value="option02">選択肢02</option>
28          <option value="option03">選択肢03</option>
29        </select>
30      </td>
31    </tr>
32    <tr class="">
33      <td>
34        <select class="form-parts" name="select">
35          <option value="default" selected>設定しない</option>
36          <option value="option01">選択肢01</option>
37          <option value="option02">選択肢02</option>
38          <option value="option03">選択肢03</option>
39        </select>
40      </td>
41    </tr>
42    <tr class="color">
43      <td>
44        <select class="form-parts" name="select">
45          <option value="default">設定しない</option>
46          <option value="option01">選択肢01</option>
47          <option value="option02" selected>選択肢02</option>
48          <option value="option03">選択肢03</option>
49        </select>
50      </td>
51    </tr>
52    <tr class="">
53      <td>
54        <select class="form-parts" name="select">
55          <option value="default" selected>設定しない</option>
56          <option value="option01">選択肢01</option>
57          <option value="option02">選択肢02</option>
58          <option value="option03">選択肢03</option>
59        </select>
60      </td>
61    </tr>
62  </tbody>
63</table>

行動規範の内容に同意します

回答1件

ベストアンサー

手っ取り早いのはdisabled(typo直しました)で処理でしょうか

javascript
1$(function(){
2  $('.form-parts').change(function(e){
3    var selected=0;
4    $('.form-parts').each(function(){
5      if($(this).val()!="default") selected++;
6    });
7    $('.form-parts').each(function(){
8     $(this).prop('disabled',(selected>=2 && $(this).val()=="default"));
9    });
10
11    $('#selected_num').html(selected);
12  }).change();
13});
14

HTML
1セレクトボックス<br>
2<span id="selected_num">0</span>/2<br>
3<select class="form-parts" name="select">
4<option value="default" selected>設定しない</option>
5<option value="option01">選択肢01</option>
6<option value="option02">選択肢02</option>
7<option value="option03">選択肢03</option>
8</select><br>
9<select class="form-parts" name="select">
10<option value="default">設定しない</option>
11<option value="option01" selected>選択肢01</option>
12<option value="option02">選択肢02</option>
13<option value="option03">選択肢03</option>
14</select><br>
15<select class="form-parts" name="select">
16<option value="default" selected>設定しない</option>
17<option value="option01">選択肢01</option>
18<option value="option02">選択肢02</option>
19<option value="option03">選択肢03</option>
20</select><br>
21<select class="form-parts" name="select">
22<option value="default">設定しない</option>
23<option value="option01">選択肢01</option>
24<option value="option02" selected>選択肢02</option>
25<option value="option03">選択肢03</option>
26</select><br>
27<select class="form-parts" name="select">
28<option value="default" selected>設定しない</option>
29<option value="option01">選択肢01</option>
30<option value="option02">選択肢02</option>
31<option value="option03">選択肢03</option>
32</select>
33