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