javascript - JQuery - 基于复选框/选择隐藏/显示表单上的项目
问题描述
我在我的模态表单上隐藏了输入。我同时使用选择下拉菜单和复选框。我的代码运行良好,但我想更好地了解我所做的事情,因为我还是 JQuery 的新手。
对于复选框,一旦打开模式,代码就可以正常工作而无需调用函数,但是为了使选择工作,我必须在模式打开后调用代码。我想更好地理解为什么会这样。谢谢!
下面的代码:
//select change
$('#modal-track').on('shown.bs.modal', function() {
$('#track_type').change(function() {
if ($('#track_type').val() == 'Source') {
$('.mfnswitch').show();
} else {
$('.mfnswitch').hide();
}
});
});
//checkbox change
function valueChanged() {
if (
$('.checkboxinput').is(':checked') &&
$('input[name=budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (!$('.checkboxinput').is(':checked') &&
!$('input[name=budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
if (!$('.checkboxinput').is(':checked') &&
$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (
$('.checkboxinput').is(':checked') &&
!$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
<div class="form-row ">
<div class="col-md-3 mb-0">
<div id="div_id_track_type" class="form-group">
<label for="track_type" class=" requiredField">
Track type<span class="asteriskField">*</span> </label>
<div class="">
<select name="track_type" class="track_type select form-control" id="track_type">
<option value="Source" selected="">Source</option>
<option value="Library">Library</option>
<option value="Original Composition">Original Composition</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-row form-row">
<div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
<div class="custom-control custom-switch">
<div class="form-group">
<div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
MFN
</label> </div>
</div>
</div>
</div>
<div class="col-md-10 mb-0 mfnhide" id="mfnhide">
<div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
Budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
</div>
</div>
<div class="col-md-4 mb-0 hidden" id="hidden">
<div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
Sync budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
</div>
</div>
<div class="col-md-6 mb-0 hidden" id="hidden">
<div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
Master budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
</div>
</div>
</div>
<div class="form-row ">
<div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">
</div>
</div>
</form>
解决方案
推荐阅读
- inno-setup - 如何在 Inno Setup 中更改大文件中的某些字节?
- python - R 函数名称()的 Python 等效项是什么?
- git - Visual Studio Code Git 装饰消失
- r - 素食主义者中的 R cca 和 predict.cca
- mysql - 遍历MYSQL中的数组
- matlab - MATLAB - 查找位于嵌套单元格数组中的条目的多维索引
- merge - 根据查找表中的值创建 SAS 变量
- arrays - 如何在 Swift 4 中通过另一个 Ints 数组对字符串数组进行排序
- vba - MS Access VBA:将字符串拆分为预定义的宽度
- excel - 将单元格中的值与数组进行比较,如果为真则添加值