Selectors within radio buttons not allowing selection in first selector

I have two radio buttons. Under each radio button is a selector, with both of having default set to disabled. When I click on one of the radio buttons, the corresponding selector under it becomes enabled -- .prop('disabled', false). When I click on the first radio button and make a selection, when my form is submitted, the option I'd selected is NOT selected -- it stays at the initial value of select_option when it goes to the database. But when I click on the second radio button and make a selection, the option I'd selected IS properly selected. Here is the html (a Handlebars template)...

<fieldset id="class-schedule-options">
  {{> application_form/_choose_options_explained}}
  <br>
  <br>
  <div class="radio-div-applic">
    <label><input type="radio" id="sched-opt-one" name="class-schedule-options" class="radio-in-appl">{{schedule_option_one}}</label>
    <select id="five-weeks" name="class_time" class="grayout seminar-session-select" disabled>
      <option id="option-with-id" value="select_option" disabled selected> -- select an option -- </option>
      <option value="Tuesdays, 31 May - 28 June, 5:00-6:30pm">Tuesdays, 31 May - 28 June, 5:00-6:30pm</option>
      <option value="Tuesdays, 31 May - 28 June, 7:00-8:30pm">Tuesdays, 31 May - 28 June, 7:00-8:30pm</option>
      <option value="Saturdays, 4 June - 2 July, 10:30am-12:00pm">Saturdays, 4 June - 2 July, 10:30am-12:00pm</option>
      <option value="Saturdays, 4 June - 2 July, 12:30am-2:00pm">Saturdays, 4 June - 2 July, 12:30am-2:00pm</option>
    </select>
  </div>
  <br>
  <div class="radio-div-applic">
    <label><input type="radio" id="sched-opt-two" name="class-schedule-options" class="radio-in-appl">{{schedule_option_two}}</label>
    <select id="one-whole-week" name="class_time" class="grayout seminar-session-select" disabled>
      <option id="option-with-id" value="select_option" disabled selected> -- select an option -- </option>
      <option value="6-10 June, 5:00-6:30pm">6-10 June, 5:00-6:30pm</option>
      <option value="6-10 June, 7:00-8:30pm">6-10 June, 7:00-8:30pm</option>
      <option value="13-17 June, 5:00-6:30pm">13-17 June, 5:00-6:30pm</option>
      <option value="13-17 June, 7:00-8:30pm">13-17 June, 7:00-8:30pm</option>
    </select>
  </div>
</fieldset> <!-- class-schedule-options -->

If I delete the second radio button/selector, the first radio button/selector WILL work. Somehow the presence of the second radio button/selector causes the first one to only select the original value (select_option).

Here is the JS associated with this html.

$("#sched-opt-one, #sched-opt-two").on("click", function() {
  if (button1.checked){ // if #five-weeks selected
    $('#five-weeks').prop('disabled', false);
    $('#five-weeks').removeClass("grayout").addClass("blackin");
    $('#one-whole-week').val('select_option');
    $('#one-whole-week').prop('disabled', 'disabled');
    $('#one-whole-week').removeClass("blackin").addClass("grayout");
  }
  else if (button2.checked) { // if #one-whole-week selected
    $('#one-whole-week').prop('disabled', false);
    $('#one-whole-week').removeClass("grayout").addClass("blackin");
    $('#five-weeks').val('select_option');
    $('#five-weeks').prop('disabled', 'disabled');
    $('#five-weeks').removeClass("blackin").addClass("grayout");
  }
});

I can't figure out why the first (the top) radio button/selector will not allow the selection of a new option, when the second radio button/selector is present.