我正在寻找使用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);
}
如果我正确理解您的情况，那么您在最新更新中似乎有一个小的逻辑错误。考虑像这样修改您的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
});
另外，有关德摩根法律的更多信息，请参阅此维基文章。希望这有帮助！
您必须为复选框添加更改事件并选择。 而且你不需要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>