时间戳

首页 > 解决方案 > 如果选中复选框，则仅包含/启用表单字段

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

问题描述

我有一个表格，顶部有一个很大的搜索字段。

还有一个花里胡哨的复选框 - 当它被勾选时，会显示 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' />&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>

我不知道该怎么做。我可能必须使用 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 在选中/取消选中复选框时切换启用/禁用属性。

标签： javascriptjqueryhtml

解决方案

// 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/

推荐阅读