jquery Bootstrap模式打开时，保持选定的chebox

amrnrhlw 于 2022-12-18 发布在 jQuery

关注(0)|答案(1)|浏览(110)

我需要保持输入复选框的选择，当我打开模态。但我不知道：
我有一个关于用户的复选框列表。当我选择并按下按钮打开模态时，我需要保持此选择以发送电子邮件，但模态中的每个复选框都未选中。
超文本：

<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>

jQuery：

$('.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();
    });

型
当我打开模态时，如何保存输入选择并保留？
屏幕截图错误

jquery

来源：https://stackoverflow.com/questions/56494045/persist-cheboxes-selected-when-bootstrap-modal-is-open

1条答案

按热度按时间

omhiaaxx1#

我建议你循环遍历第一个列表，然后把它的项目状态复制到第二个列表。
使用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>

赞(0）回复(0）举报 2022-12-18

我来回答

jquery Bootstrap模式打开时，保持选定的chebox

1条答案

相关问题

热门标签

最新问答