jquery - 打开引导模式时保留选择的复选框
问题描述
当我打开模式时,我需要保持输入复选框的选择。但我不知道:
我有一个关于用户的复选框列表。当我选择并按下按钮打开模式时,我需要保留此选择以发送电子邮件,但模式中的每个复选框都未选中。
HTML:
<div>
<h4>LIST USERS</h4>
@foreach ($agent as $agent)
<ul class="user-select">
<li>
<h5>{{ $agent->name }}</h5>
<input type="checkbox" name="agents[]"/>
</li>
</ul>
@endforeach
<p>
<a href="#" class="button register-interest">Register interest</a
</p>
</div>
模态:
<div class="register-modal">
<div class="modal-box">
<div class="header">
<h3 class="text-black">Register your interest</h3>
<a href="#" title="Close" class="close-modal">X</a>
</div>
<div class="content">
<h5>Select Agents</h5>
<form>
@foreach ($agents as $agent)
<ul class="agents-select">
<li>
<h5>{{ $user->name }}</h5>
<input type="checkbox" name="agents[]"/>
</li>
</ul>
@endforeach
<input type="text" name="name"/>
<input type="email" name="email"/>
<textarea name="comments"></textarea>
<button type="submit" name="register">SEND</button>
</form>
</div>
</div>
</div>
查询:
$('.register-interest').on('click', function(e) {
e.preventDefault();
$('.register-modal').show();
});
$('.register-modal a.close-modal').on('click', function(e) {
e.preventDefault();
$('.register-modal').hide();
});
真实代码:
HTML:
模态:
查询:
打开模式时如何保存输入选择并保留?
提前致以最诚挚的问候!
屏幕截图错误
解决方案
我建议您遍历第一个列表,然后将其项目的状态复制到第二个列表。
用于jQuery#eq
查找对应的循环<input>
并jQuery#prop
获取是否选中:
$('.register-interest').on('click', function(e) {
e.preventDefault();
$('.user-select input').each((i, input) => {
$('.agents-select input').eq(i).prop('checked', $(input).prop('checked'));
});
$('.register-modal').show();
});
工作示例:
$('#show-modal').on('click', () => {
$('#checklist input').each((i, input) => {
$('#modal input').eq(i).prop('checked', $(input).prop('checked'));
});
$('#modal').show();
});
$('#hide-modal').on('click', () => {
$('#modal').hide();
});
#modal {
display: none;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="checklist">
<li>
<span>User 1</span>
<input type="checkbox" name="user[]">
</li>
<li>
<span>User 2</span>
<input type="checkbox" name="user[]">
</li>
<li>
<span>User 3</span>
<input type="checkbox" name="user[]">
</li>
</ul>
<button id="show-modal">Show modal</button>
<ul id="modal">
<li>
<span>User 1</span>
<input type="checkbox" name="user[]">
</li>
<li>
<span>User 2</span>
<input type="checkbox" name="user[]">
</li>
<li>
<span>User 3</span>
<input type="checkbox" name="user[]">
</li>
<li>
<button id="hide-modal">Hide modal</button>
</li>
</ul>
推荐阅读
- android - RxJava2 concat 运算符不返回适当的流
- python-3.x - 如何检查 dlib 是否正在使用 GPU?
- javascript - 当通过脚本标签请求捆绑时,如何配置 Webpack 4 以自动导入拆分块?
- java - 带有 Ant junitlauncher 的 JUnit 5:NoClassDefFoundError:org/junit/platform/launcher/core/LauncherFactory
- c# - 使用 C# 在 Unity 2D 中旋转子对象
- css - 向下滚动时删除 AMP-Animation 中的 div
- html - 将 div 放在图像下方
- ios - 如何计算 iOS 中网络连接测试的有效负载大小和超时长度?
- java - 不能将 int 字段设置为空值
- javascript - Html 必需属性不适用于按钮功能