Dropdown option is not re-enabling

I have two dropdowns: dropdown1 and dropdown2. dropdown2 is disabled to begin. You can enable dropdown2 with a checkbox. Once it is enabled, you can select an option in either dropdown and it will be displayed as disabled in the other dropdown. This works both ways. Lets say an option is selected in dropdown2 (so it is disabled in dropdown1) and you uncheck the checkbox to disable dropdown2. I would like the option in dropdown1 to then be enabled because dropdown2 is disabled as a whole. When the checkbox is unchecked, I am setting the selectedIndex of dropdown2 to 0 but it is not working. This is probably hard to follow, so I made a codepen:

http://ift.tt/1MQ1aYL

HTML

<select name="dropdown1" id="dropdown1">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="dropdown2" id="dropdown3" class="dropdown-lower">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<input type="checkbox" id="checkbox"/>

Javascript

$(document).ready(function() {
    $(".dropdown-lower").prop("disabled", true);
});

$("#checkbox").click(function () {
    if ($(this).is(":checked")) {
        $(".dropdown-lower").prop("disabled", false);
    } else {
         $(".dropdown-lower").prop("disabled", true);
        document.getElementById("dropdown3").selectedIndex = "0";
        document.getElementById("dropdown-operator2").selectedIndex = "0";
        document.getElementById("dropdown4").selectedIndex = "0";
    }
});


if ($(".dropdown-lower").prop("disabled", false)) {

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
    $dropdown2.find('option').prop("disabled", false);
    var selectedItem = $(this).val();
    if (selectedItem) {
    $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    }
});

$dropdown2.change(function() {
    $dropdown1.find('option').prop("disabled", false);
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    }
});
}