After reload the page checkbox should not reset

0
votes

I am using Angular-Js and Jquery. I am implementing disable all checkboxes in the page after click on checkbox. But When I reload the page my page is reset, I don't want to reset disable checkboxes after reload. Suppose I checked checkbox after that reload the page checkbox should be checked.

Below is the code example.

$('#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

When I reload the page, All checkbox is reset.

I can use Angular-Js also. I set checkbox value in query parameter like true or false.

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

But I did not get desired output.

2
javascriptjqueryhtmlangularjscheckbox
look for localStorage - Louys Patrice Bessette
Your problem regarding reloading the page, your data is lost. It could be solved using localstorage or you save intermediate state of checkboxes at server (backend). you need some persistence storage to make it happen. - Charu Maheshwari
You could also update the url querystring with the checked checkboxes and on refresh read it and re-check them. It would affect the page history however. - Akrion

2 Answers

0
votes

You can use something like sessionStorage or localStorage to save checkboxes' state after page reloading. There is an angularjs library, that I use.

You also can find same thing for jQuery.

0
votes

The best way is to call ajax on page load via API method though SELECT query of Save Table.

<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);
                });
            }