在jQuery中启用/禁用选择框的问题

Question

我有两个选择组，我尝试将第二个连接到第一个，基于第一个选择，为用户提供适当的颜色选项。

在页面加载时，根据第一个框中的选择（“选择主题”），在第二个选择框中显示正确的颜色选项列表。然后，如果您更改回不同的设计，则在第二个选择组中加载正确的颜色选项。但是如果再次改回，则取消选择所有颜色选项。我整天盯着这一点，无法确定问题。

这是HTML

//On selection of the design, sets appropriate color based on the design selected
$('#design').on('change', function() {
  if ($(this).val() == 'js puns') {
    $('.js').prop('disabled', true);
    $('.js_puns').prop('disabled', false);
  } else if ($(this).val() == 'heart js') {
    $('.js_puns').prop('disabled', true);
    $('js').prop('disabled', false);
  } else {
    $('js').prop('disabled', false);
    $('js_puns').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="design">Design:</label>
  <select id="design" name="user_design">
                <option>Select Theme</option>
                <option value="js puns">Theme - JS Puns</option>
                <option value="heart js">Theme - I &#9829; JS</option>
              </select>
</div>

<div id="colors-js-puns" class="">
  <label for="color">Color:</label>
  <select id="color">
                <option>Select Color</option>
                <option value="cornflowerblue" class="js_puns">Cornflower Blue (JS Puns shirt only)</option>
                <option value="darkslategrey" class="js_puns">Dark Slate Grey (JS Puns shirt only)</option> 
                <option value="gold" class="js_puns">Gold (JS Puns shirt only)</option> 
                <option value="tomato" class="js">Tomato (I &#9829; JS shirt only)</option>
                <option value="steelblue" class="js">Steel Blue (I &#9829; JS shirt only)</option> 
                <option value="dimgrey" class="js">Dim Grey (I &#9829; JS shirt only)</option> 
              </select>
</div>