簡體   English   中英

如果選中了復選框,則即使重新加載頁面也要保持DIV隱藏

[英]If Checkbox is Checked Keep DIV hidden even on page reload

我有滑軌表格。 當選中一個復選框(數據庫中為true)時,我想使div隱藏。 我找到了其他解決方案,但在重新加載頁面時,它再次出現,如果選中或為true,我想使div隱藏。

  <div class="form-group">
    <%= form.check_box :tos_checkbox, class: "terms_of_services" %>
    <%= form.label :tos_checkbox, "Agree to TOS" %>
  </div>

  <div id="hide_if_above_checked">
    Do You Agree to Our TOS
  </div>

我知道此腳本將不起作用,但是一直在嘗試幾個不同的示例來解決我的問題。

  $(function () {
      $('.terms_of_services').change(function () {
          if(checkbox.checked == true){
              document.getElementById("hide_if_above_checked").setAttribute("d-none");
          }else{
              document.getElementById("hide_if_above_checked").removeAttribute("d-none");
          }
      });
  });

要保留數據,您需要使用window.localStoragewindow.sessionStoragedocument.cookie

您的后端甚至可以訪問Cookie

從db調用復選框值並檢查渲染時間

 <%if @variable_of_current_model.tos_checkbox != 'true' %>
  <div id="hide_if_above_checked">
   Do You Agree to Our TOS
 </div>
<% end %>

div#hide_if_above_checked僅在數據庫不正確時顯示。

您可以在頁面加載時獲取復選框的值。

if ($(".terms_of_services").is(':checked')){
  $("#some-div-box").hide();
}else{
  $("#some-div-box").show();
}

這樣,如果選中了復選框,則可以隱藏div。

添加到您的CSS

.hidden-div {
  display: none;
}

接着

<div id="hide_if_above_checked" class="<%= 'hidden-div' if tos_checkbox %>">
  Do You Agree to Our TOS
</div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM