我的表单有两个复选框元素。这两个将显示/隐藏额外的表单元素取决于它们是否被选中。然后我尝试实现用户点击添加新记录的功能。在这种情况下,应清除所有表单数据,包括这两个复选框元素。但是,我取消选中了两个元素,但数据切换并未隐藏这些元素。这是我的代码示例:
$('.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 一起工作?
最佳答案
使用 Collapse 组件方法...
https://getbootstrap.com/docs/3.3/javascript/#collapse-methods
$('.frm-Submit .collapse').collapse('toggle');
关于javascript - 如何使用 JQuery 触发 Bootstrap 3 数据切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50049322/