Question

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

还有一个铃声和口哨复选框 - 当勾选时，会显示3个附加字段。

我希望将form方法设置为GET而不是POST。

提交表单后，网址最终为：

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

我想改变的是，如果没有勾选铃声和口哨复选框，则其他3个字段（包括＆＃34;口哨和＃34;复选框＆＃34;未在表单中提交，以便网址显示为：

test.php?q=tree

然后，如果用户勾选该复选框，从而想要搜索其他内容，则这些字段将包含在搜索中。

这是我的开始代码：

＆＃13;

// show / hide bells and whistles checkbox 

$(function() {

  $('#whistles').change(function() {
    if ($(this).is(":checked")) {
      $('#options').show();
    } else {
      $('#options').hide();
    }
  });

});

＆＃13;

<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' />&nbsp;<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>

＆＃13;

我不确定该怎么做。我是否必须使用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; }

然后我们从答案（https://stackoverflow.com/a/50778666/4532066）中获取JS，以便在选中/取消选中复选框时切换启用/禁用属性。

Answer 1

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

https://jsfiddle.net/t2a4fwbn/

如果选中复选框，则仅包含/启用表单字段

1 个答案: