Question

我有两个单选按钮。每个单选按钮下都有一个选择器，默认设置为disabled。当我单击其中一个单选按钮时，其下的相应选择器将变为启用状态 - .prop('disabled', false)。当我点击第一个单选按钮并进行选择时，当我的表单被提交时，未选择我选择的选项 - 当它进入数据库时它保持在select_option的初始值。但是当我点击第二个单选按钮并进行选择时，我选择的选项是正确选择的。这是html（一个Handlebars模板）......

<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 -->

如果删除第二个单选按钮/选择器，第一个单选按钮/选择器将起作用。不知何故，第二个单选按钮/选择器的存在导致第一个选择原始值（select_option）。

这是与此html相关联的JS。

$("#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");
  }
});

当第二个单选按钮/选择器出现时，我无法弄清楚为什么第一个（顶部）单选按钮/选择器不允许选择新的option。

单选按钮内的选择器不允许在第一个选择器

0 个答案: