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不会在input元素上发生support <select>事件。
如果在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的一个已知问题（我相信，如果您使用键盘来选择下拉菜单项，它将起作用）。我建议您将事件绑定为单击。

Javascript <input />不适用于IE 11

2 个答案: