如何使用 JQuery 触发 Bootstrap 3 数据切换？

Question

我的表单有两个复选框元素。这两个将显示/隐藏其他表单元素，这取决于它们是否被选中。然后我尝试实现用户单击添加新记录的功能。在这种情况下，应清除所有表单数据，包括这两个复选框元素。但是，我让这两个元素都未选中，但 data-toggle 并没有隐藏这些元素。这是我的代码示例：

$('.account-type').on('change', checkFormFld);

function checkFormFld() {
  var checked = false,
    containerID = $(this).data('target'),
    checkboxes = $('.account-type');

  $('.account-type').each(function() {
    checked = checked || $(this).is(':checked');
  });

  $(containerID + ' :input').prop('disabled', !$(this).is(':checked'));
  checkboxes.prop('required', !checked); // Set required attribute to false.
}

$('#account_goback').on('click', clearForm);

function clearForm(e) {
  e.preventDefault();
  $('.frm-Submit')[0].reset();
  $('.frm-Submit .collapse').collapse('hide');
  $('.account-type').trigger('change', checkFormFld);
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="searchaccount_container" class="collapse in">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
          <span class="glyphicon glyphicon-plus-sign"></span> New Account
      </button>
    </div>
  </div>
</div>
<div id="saveaccount_container" class="collapse">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn btn-primary" name="account_goback" id="account_goback" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
        <span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
      </button>
    </div>
  </div>
  <form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
    <div class="form-group required">
      <label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
      <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
      <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
      <input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
      <div class="checkbox">
        <label for="user">
            <input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required> 
            <span class="label label-default">User</span>
        </label>
        <label for="staff">
            <input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required> 
            <span class="label label-info">Staff</span>
         </label>
      </div>
    </div>
    <div id="user-account" class="collapse">
      <div class="form-group required">
        <label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
        <select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled>
          <option value="">-- Select the option --</option>
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
      </div>
      <div class="form-group required">
        <label class="control-label" for="admin"><span class="label label-default">System Admin:</span></label>
        <select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled>
          <option value="">-- Select the option --</option>
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
      </div>
    </div>
    <div id="staff-account" class="collapse">
      <div class="form-group required">
        <label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
        <select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled>
          <option value="">-- Select the option --</option>
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
        <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

如果您在clearForm 函数中运行示例并取消注释代码行，您会看到隐藏的容器会向上滑动，但如果我再次单击则不会显示。有没有办法使用 JQuery 来实现这一点？

Answer 1

使用折叠组件方法...

https://getbootstrap.com/docs/3.3/javascript/#collapse-methods

$('.frm-Submit .collapse').collapse('toggle');

Answer 2

您需要做的就是删除那些我们需要在 Go Back 按钮上折叠的类。并删除所需的属性

$('#user-account').removeClass('in');
$('#staff-account').removeClass('in');
$("#frm_isstaff").removeAttr('required'); // Set required attribute to false. 
$("#frm_activeuser").removeAttr('required'); // Set required attribute to false. 
$("#frm_systemadmin").removeAttr('required'); // Set required attribute to false. 

---

var $checkbox = $('.account-type');
$checkbox.on('change', function() {
  var checked = false,
    containerID = $(this).data('target');

  $checkbox.each(function() {
    checked = checked || $(this).is(':checked');
  });

  $('div' + containerID + ' :input').prop('disabled', !$(this).is(':checked')); // Set disabled attribute on all input fields when check box is unchecked.
  $checkbox.prop('required', !checked); // Set required attribute to false. 
});

$('#account_new').on('click', clearForm);

function clearForm(e) {
  e.preventDefault();
  $('.frm-Submit')[0].reset();
  $('#user-account').removeClass('in');
  $('#staff-account').removeClass('in');
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="searchaccount_container" class="collapse in">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn btn-primary" data-toggle="collapse" name="account_new" id="account_new" data-target="#saveaccount_container,#searchaccount_container">
          <span class="glyphicon glyphicon-plus-sign"></span> New Account
      </button>
    </div>
  </div>
</div>
<div id="saveaccount_container" class="collapse">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
        <span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
      </button>
    </div>
  </div>
  <form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
    <div class="form-group required">
      <label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
      <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
      <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
      <input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
    </div>
    <div class="form-group required">
      <label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
      <div class="checkbox">
        <label for="user">
            <input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required> 
            <span class="label label-default">User</span>
        </label>
        <label for="staff">
            <input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required> 
            <span class="label label-info">Staff</span>
         </label>
      </div>
    </div>
    <div id="user-account" class="collapse">
      <div class="form-group required">
        <label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
        <select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled>
          <option value="">-- Select the option --</option>
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
      </div>
      <div class="form-group required">
        <label class="control-label" for="admin"><span class="label label-default">System Admin:</span></label>
        <select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled>
          <option value="">-- Select the option --</option>
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
      </div>
    </div>
    <div id="staff-account" class="collapse">
      <div class="form-group required">
        <label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
        <select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled>
          <option value="">-- Select the option --</option>
          <option value="0">No</option>
          <option value="1">Yes</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
        <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>