Javascript 仅当选中复选框时才包括/启用表单字段

我有一个表单，顶部有一个大的搜索字段

还有一个铃铛和口哨复选框-勾选此复选框后，将显示3个附加字段

我希望表单方法设置为GET而不是POST

提交表单时，URL最终为：

test.php？q=tree&whistles=y&exa=any&fmt=cat&opt=img

我想更改的是，如果未勾选“铃声和哨声”复选框，则表单中不会提交其他3个字段（4个，包括“哨声”复选框），因此url显示如下：

test.php？q=tree

然后，如果用户勾选复选框，因此希望搜索其他内容，则这些字段将包含在搜索中

这是我的起始代码：

//显示/隐藏铃声和口哨复选框
$（函数（）{
$（“#哨声”）.change（function（）{
如果（$（this）.is（“：checked”））{
$（“#选项”）.show（）；
}否则{
$（“#选项”）.hide（）；
}
});
})；

鸣钟鸣笛

匹配类型
火柴
任何
准确的
总体安排
总体安排
类别
子类别
输出
输出
形象
字体
去

---

有多种方法可以做到这一点，其中一种方法是在隐藏时禁用元素

并在显示时删除
禁用属性，因为禁用的输入/元素不会被提交。此外，您还可以使用
jQuery
提交表单，方法是通过禁用隐藏的输入
来过滤可见元素d
提交前。感谢您的帮助@erlangparasu-不幸的是，如果我提交表单，搜索字段中只有文本，并且未选中复选框，则返回的URL包含所有表单字段，而不仅仅是
q
字段。我只需再次测试我的代码及其工作。如果复选框为unc，则浏览器仅打开q字段hecked.另外，请再次查看@the alpha's answer for descriptionTanks@erlangparasu-我在JSFIDLE上看到它工作正常，因为您的url为
https://fiddle.jshell.net/t2a4fwbn/show/test.php?q=tree
如果复选框未提交，以及
https://fiddle.jshell.net/t2a4fwbn/show/test.php?q=tree&whistles=y&exa=any&fmt=cat&opt=img
如果是的话。我在windows PC上测试，在IIS和XAMPP上测试过，所有表单字段都是在Firefox和Chrome上测试时提交的。我想知道为什么会有不同？我在jsfiddle中计算出，选择元素在html中添加了
disabled='disabled'
，这是这就是代码工作的原因。谢谢在我的问题中加入了我用来解决这个问题的方法。我必须添加一些JS来处理在提交页面时检查复选框是否被选中的问题。再次感谢您的帮助。
// 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();
        }
    });
});