Как запустить Bootstrap 3 для переключения данных с помощью JQuery? - PullRequest
Новая
       10

Как запустить Bootstrap 3 для переключения данных с помощью JQuery?

0 голосов
/ 26 апреля 2018

У меня есть форма с двумя флажками. Эти два будут показывать / скрывать дополнительные элементы формы в зависимости от того, отмечены они или нет. Затем я попытался реализовать функцию, при которой пользователь нажимает кнопку добавления новой записи. В этом случае все данные формы должны быть удалены, включая эти два элемента флажка. Тем не менее, я получаю оба элемента непроверенными, но переключение данных не скрывает элементы. Вот пример моего кода: 

$('.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?

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Все, что вам нужно сделать, это удалить те классы, которые нам нужно свернуть на Go Back Button. И удалить атрибут также требуется 

$('#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>
0 голосов
/ 26 апреля 2018

Использовать методы компонента Collapse ...

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

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