Javascript <input> 不适用于 IE 11

Question

我正在处理我的Django 项目，我遇到了Javascript 部分和IE 11 的问题。 我的函数在 Firefox 和 Chrome 上运行良好，但在 Internet Explorer 11 上却不如我所愿。

流程：

我有一个带有复选框、下拉列表和提交按钮的表格。 当我没有选中任何复选框并在下拉列表中选择任何值时，此按钮被禁用。

图片：

如您所见，提交按钮在以下情况下被禁用：

• 未选中任何复选框和列表值
• 复选框已选中，但未列出值
• 复选框未选中，但列表值已选中

仅在选择复选框和列表值时才启用提交按钮。

我的代码：

Javascript 部分：

<script type="application/javascript">

    function checkValid() {
      var cbChecked = $(".fake-radio").is(":checked");  // check if checked

      var selectelem = document.getElementById('manage-doc-year');
      var btnelem = document.getElementById('document-button');
      btnelem.disabled = !selectelem.value;
      var dropdown_value = btnelem.disabled;

      $("#document-button").prop("disabled", !cbChecked || dropdown_value);
    }

    $(function () {
      checkValid(); // run it for the first time
      $(".fake-radio").on("change", checkValid);  // bind checkbox
      $("#manage-doc-year").on("input", checkValid)  // bind textbox
    });

</script>

HTML 部分：

<div class="col-md-offset-1 col-md-5">
  <h4> {% trans "List of documents:" %} </h4>
  <form action="" method="POST">
    {% csrf_token %}
    <table id="document-table" class="table table-bordered table-striped table-condensed table_model">
      <thead>
      <tr>
        <th>{% trans 'Choice' %}</th>
        <th>{% trans 'Document title' %}</th>
      </tr>
      </thead>
      <tbody>
      {% for document in query_document %}
        <tr>
          <td><input type="checkbox" class="fake-radio" id="document-checkbox" name="DocumentChoice"
                     value="{{ document.id }}"></td>
          <td>{{ document.title }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

    <select id="manage-doc-year" name="q1year" value="{{ request.get.q1year }}" required>
      <option selected="selected">
        <option value="" selected disabled hidden></option>
      </option>
    </select>

    <button class="btn btn-default" id="document-button" type="submit"
            name="UpdateDocument">{% trans "Submit" %}</button>
  </form>
</div>

IE 11：

使用 IE 11，它只有在我先选择下拉值，然后选中复选框时才有效。但不是如果我先签到，然后我选择值。为什么？

谢谢！

Answer 1

IE 不会在 <select> 元素上发生 support input 事件。
如果在 IE 上，请考虑监听 change 事件。

你可以写：

$("#manage-doc-year").on("change", checkValid)

而不是：

$("#manage-doc-year").on("input", checkValid)

注意：虽然所有浏览器都支持change 事件，但它的行为与input 事件的（source）有点不同：

change 的触发频率低于input - 它仅在用户提交更改时触发。

并且可能在不同的浏览器上有所不同 (source)：

不同的浏览器并不总是同意是否应该为某些类型的交互触发 change 事件。例如，<select> 元素中的键盘导航永远不会在 Gecko 中触发更改事件，直到用户按 Enter 键或将焦点从 <select> 上移开

Answer 2

听起来更改下拉菜单不会触发您的事件。这是 Internet Explorer 的一个已知问题（我相信如果您使用键盘选择下拉条目，它确实有效）。我建议您将事件绑定到 click。