JavaScript启用/禁用提交按钮

Question

我正在寻找使用Javascript来启用/禁用提交按钮。 此按钮应同时满足以下两个条件：

启用：如果选中复选框并且设置了下拉列表值
禁用：如果以上两个条件或其中一个条件不好（未选中复选框或未设置日期值）

这是我的代码：

function checkValid() {
  var cbChecked = $(".fake-radio").is(":checked");  // check if checked
  var selectelem = document.getElementById('year');
  var btnelem = document.getElementById('document-button');

  btnelem.disabled = !selectelem.value;

    }

这是我的html部分：

<table id="document-table">
      <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>
            </tr>
          {% endfor %}
      </tbody>
</table>

<select id="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>

我对JavaScript很陌生

编辑：

我做到了，是真的吗？

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

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

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

Answer 1

如果我正确理解您的情况，那么您似乎在最新更新中有一个小逻辑错误。 考虑像这样修改您的checkValid函数：

function checkValid() {

  var selectelem = $('#year');
  var isChecked = $(".fake-radio").is(":checked");  // radio is checked

  var selectHasValue = !!selectelem.val(); // select has value

  // use de morgans law to compute disabled property
  $("#document-button").prop("disabled", !(isChecked || selectHasValue));
}

您需要确保在更改任何相关的表单输入时调用checkValid() 。 您可以通过添加以下脚本来做到这一点：

$(function() {

    // Apply validation logic when relevant fields change
    $('#year, .fake-radio').change(checkValid);

    checkValid(); // Apply validation logic on page load automatically
});

另外，有关德摩根法律的更多信息，请参见此Wiki文章。 希望这可以帮助！

Answer 2

您必须为复选框添加更改事件，然后选择。 并且您不需要jquery来执行此操作，请尽可能使用纯js。 这就是您所需要的，以此为参考并编辑您的代码：

 function checkValid(){ var check = document.getElementById("document-checkbox").checked; var e = document.getElementById("year"); var select = e.options[e.selectedIndex].value; if (select && check) document.getElementById("document-button").disabled = false else document.getElementById("document-button").disabled = true }

 <body> <input onchange="checkValid()" type="checkbox" class="fake-radio" id="document-checkbox" name="DocumentChoice" value="{{ document.id }}"> <select onchange="checkValid()" id="year" name="q1year" value="{{ request.get.q1year }}" required> <option selected="selected"> <option value="x">x</option> </option> </select> <button disabled class="btn btn-default" id="document-button" type="submit" name="UpdateDocument">submit</button> </body>

JavaScript启用/禁用提交按钮

问题描述

2 个解决方案

解决方案1
0 2018-10-15 09:20:15

解决方案2
0 2018-10-15 09:48:08

JavaScript启用/禁用提交按钮

问题描述

2 个解决方案

解决方案1 0 2018-10-15 09:20:15

解决方案2 0 2018-10-15 09:48:08

解决方案1
0 2018-10-15 09:20:15

解决方案2
0 2018-10-15 09:48:08