如果选中复选框，则仅包括/启用表单域
如果选中复选框，则仅包括/启用表单域
提问于 2018-06-10 04:34:37
我有一个表单，在顶部有一个很大的搜索字段。
还有一个bells and whistles复选框-当它被勾选时，会显示3个额外的字段。
我希望表单方法设置为GET而不是POST。
提交表单时，URL的结尾为：
test.php?q=tree&whistles=y&exa=any&fmt=cat&opt=img
我想更改的是，如果钟声和口哨复选框未被勾选，则其他3个字段(包括“口哨”复选框的4个字段)不会在表单中提交，因此url将显示为以下内容：
test.php?q=tree
然后，如果用户勾选了该复选框，从而希望搜索其他内容，则这些字段将包含在搜索中。
这是我的起始代码：
// show / hide bells and whistles checkbox
$(function() {
$('#whistles').change(function() {
if ($(this).is(":checked")) {
$('#options').show();
} else {
$('#options').hide();
}
});
});<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form action='test.php' method='get'>
<input type='text' class='form-control form-control-lg' id='q' name='q' placeholder='Search'>
<div style='margin-top:5px;'><input type='checkbox' id='whistles' name='whistles' value='y' /> <label for='whistles'>Show Bells and Whistles</label></div>
<p></p>
<div id='options' style='display:none' class="alert alert-secondary">
<div class='form-row'>
<div class='form group col-md-4'>
<label for='exa'>Match Type</label>
<select name='exa' id='exa' class='form-control form-control-sm'>
<option value='' disabled='disabled'>Match</option>
<option value='any'>Any</option>
<option value='exact'>Exact</option>
</select>
</div>
<div class='form group col-md-4'>
<label for='fmt'>Format</label>
<select name='fmt' id='fmt' class='form-control form-control-sm'>
<option value='' disabled='disabled'>Format</option>
<option selected='selected' value='cat'>Category</option>
<option value='subcat'>Subcategory</option>
</select>
</div>
<div class='form group col-md-4'>
<label for='opt'>Output</label>
<select name='opt' id='opt' class='form-control form-control-sm'>
<option value='' disabled='disabled'>Output</option>
<option selected='selected' value='img'>Image</option>
<option value='emj'>Font</option>
</select>
</div>
</div>
</div>
<button type='submit' class='btn btn-success' style='margin:5px 0px 15px 0px;'>Go!</button>
</form>
我不知道该怎么做。也许我必须使用jQuery detach()？如果是这样的话，不幸的是我不知道我会怎么做。
通过执行以下操作修复：
我添加此JS是为了检查在提交页面时是否选中了复选框。如果是，请启用其他表单域。如果不是，请禁用它们：
var foo1 = document.getElementById("whistles").checked;
if (foo1 == true) { document.getElementById("exa").disabled = false; } else { document.getElementById("exa").disabled = true; }
if (foo1 == true) { document.getElementById("fmt").disabled = false; } else { document.getElementById("fmt").disabled = true; }
if (foo1 == true) { document.getElementById("opt").disabled = false; } else { document.getElementById("opt").disabled = true; }然后使用答案中的JS (https://stackoverflow.com/a/50778666/4532066)在选中/取消选中复选框时切换启用/禁用属性。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 05:22:20
// show/hide bells and whistles checkbox
$(function () {
$('#whistles').change(function () {
if ($(this).is(":checked")) {
$('#exa').removeAttr('disabled');
$('#fmt').removeAttr('disabled');
$('#opt').removeAttr('disabled');
$('#options').show();
} else {
$('#exa').attr('disabled', 'disabled');
$('#fmt').attr('disabled', 'disabled');
$('#opt').attr('disabled', 'disabled');
$('#options').hide();
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50778310
复制相关文章
相似问题