Javascript <input> 不适用于 IE 11

Question

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

进程：

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

图片：

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

None 复选框和列表值 selected
复选框已选中但未列出值
未选中复选框但列出了值 selected

仅当复选框和列表值被 select 时，提交按钮才可用。

我的代码：

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，仅当我先 select 下拉值，然后选中复选框时，它才有效。但不是如果我先签到，那么我 select 值。为什么？

谢谢！

Answer 1

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

Answer 2

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

你可以这样写：

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

而不是：

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

注意：尽管所有浏览器都支持 change 事件，但它的行为与 input 事件的 (source):

有点不同

change fires less often than input – it only fires when the changes are committed by the user.

并且可能因不同的浏览器而异 (source)：

Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in <select> elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the <select>

Javascript <input> 不适用于 IE 11

Javascript <input> doesn't work well with IE 11

html

javascript

jquery

internet-explorer

internet-explorer-11