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>

我对Java语言很陌生

编辑：

我做到了，是真的吗？

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
});

此外，有关摩根大通法律的更多信息，see this wiki article。希望这会有所帮助！

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 个答案: