重新加载页面复选框后不应重置

Posted 2023-05-09

【中文标题】重新加载页面复选框后不应重置

【英文标题】：After reload the page checkbox should not reset

【发布时间】：2019-01-08 15:44:46

【问题描述】：

我正在使用 Angular-Js 和 Jquery。单击复选框后，我正在执行禁用页面中的所有复选框。但是当我重新加载页面时，我的页面被重置，我不想在重新加载后重置禁用复选框。假设我在重新加载页面复选框后选中了复选框。

下面是代码示例。

$('#mainChk').on('click', function()
  var categories = $('.disableCheck');
  categories.prop('disabled', !categories.prop('disabled'));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="mainChk" type="checkbox" > Main
<input type="checkbox" class="disableCheck"> First
<input type="checkbox" class="disableCheck"> Second
<input type="checkbox" class="disableCheck"> Third

当我重新加载页面时，所有复选框被重置。

我也可以使用 Angular-Js。我在查询参数中设置复选框值，例如 true 或 false。

$location.search( checkbox: disableCheck.prop('disabled') )

但我没有得到想要的输出。

【问题讨论】：

寻找localStorage

您关于重新加载页面的问题，您的数据丢失了。它可以使用 localstorage 解决，或者您在服务器（后端）保存复选框的中间状态。你需要一些持久性存储来实现它。

您还可以使用选中的复选框更新 url querystring 并在刷新时阅读并重新检查它们。但是，它会影响页面历史记录。

【参考方案1】：

您可以使用 sessionStorage 或 localStorage 之类的东西在页面重新加载后保存复选框的状态。 我使用了一个 angularjs library。

你也可以为 jQuery 找到同样的东西。

【讨论】：

虽然此链接可能有助于您回答问题，但您可以通过获取链接的重要部分并将其放入您的答案来改进此答案，这样可以确保您的答案仍然是一个答案，如果链接被更改或删除:)

【参考方案2】：

最好的方法是通过 API 方法通过保存表的 SELECT 查询在页面加载时调用 ajax。

<input type="checkbox" class="disableCheck" value="First"> First
<input type="checkbox" class="disableCheck" value="Second"> Second
<input type="checkbox" class="disableCheck" value="Third"> Third

$(document).ready(function () 
                $.ajax(
                  url: 'abc.asmx',// Call List Method of Save Checkbox Table
                    success: function (data) 
                        callback(data);
                    ,
                )
            );

  function callback(data) 
                $.each(data.d, function (index, item) 
                    $("#checkboxId option[value='" + item.SaveCheckboxColumnName + "']").prop("checked",
                        true);
                    $("#checkboxId option[value='" + item.SaveCheckboxColumnName +
                        "']").prop("disabled",
                            true);
                );