Question

使用localstorage为我的网站实施了解决方案。但是，尽管在页面上仍然检查了复选框，但刷新它们的附带功能（如显示或启用输入字段）不会发生。

如何才能使隐藏的部分保持适当显示，并且在页面刷新时单击附带的复选框时启用禁用的字段？

这是我在jsfiddle中工作的模型：https://jsfiddle.net/bpmnruhg/

JS：

$(document).ready(function(){
    $('#sub-check').change(function(){
        if(!this.checked)
    $('#submitter').fadeOut('slow');
        else
    $('#submitter').fadeIn('slow');
    });
});


$(document).ready(function () {
          function init() {
              if (localStorage["pi-name"]) {
                 $('#pi-name').val(localStorage["pi-name"]);
              }
              if (localStorage["pi-jhed"]) {
                 $('#pi-jhed').val(localStorage["pi-jhed"]);
              }
              if (localStorage["pi-email"]) {
                 $('#pi-email').val(localStorage["pi-email"]);
              }
              if (localStorage["sub-name"]) {
                  $('#sub-name').val(localStorage["sub-name"]);
              }
              if (localStorage["sub-jhed"]) {
                 $('#sub-jhed').val(localStorage["sub-jhed"]);
              }
              if (localStorage["sub-email"]) {
                 $('#sub-email').val(localStorage["sub-email"]);
              }
           }
             init();
           });
                     $('.stored').keyup(function () {
               localStorage[$(this).attr('name')] = $(this).val();
           });


    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
        $checkboxes = $("input:checkbox");

    $checkboxes.on("change", function(){
        $checkboxes.each(function(){
            checkboxValues[this.id] = this.checked;
    });

    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
    });

// On page load
    $.each(checkboxValues, function(key, value) {
        $("#" + key).prop('checked', value);
    });

HTML：名称：

  <label for="pi-jhed">JHED ID: </label>
  <input class="stored" name="pi-jhed" id="pi-jhed" type="text" required />

  <label for="pi-email">Email: </label>
  <input class="stored" name="pi-email" id="pi-email" placeholder="you@example.com" type="email" required /> 

  <label for="sub-check" style="display:inline">Is the person making the submission different from the PI? </label>
  <input type="checkbox" class="stored" name="sub-check" id="sub-check" onchange="document.getElementById('sub-name').disabled = !this.checked; document.getElementById('sub-jhed').disabled = !this.checked; document.getElementById('sub-email').disabled = !this.checked;" />
<br />
<div class='hidden' id="submitter">
  Submitter:
  <label for="sub-name">Name: </label>
  <input class="stored" name="sub-name" id="sub-name" placeholder="Last Name, First Name" type="text" required disabled />

  <label for="sub-jhed">JHED ID: </label>
  <input class="stored" name="sub-jhed" id="sub-jhed" type="text" required disabled />

  <label for="sub-email">Email: </label>
  <input class="stored" name="sub-email" id="sub-email" placeholder="you@example.com" type="email" required disabled />
</div>

CSS：

.hidden {
  display:none;
}

Answer 1

触发onchange事件，它将执行正常更改事件期间所做的一切。

$.each(checkboxValues, function(key, value) {
    $("#" + key).prop('checked', value);
    document.getElementById(key).onchange();
});

Answer 2

要使用jQuery触发事件，您可以链接change（）方法。

$("#" + key).prop('checked', value).change();

实际上，在这个用例中，使用纯CSS可以更好地显示和隐藏表单中的内容，但这只是一个建议：

.certain-checkbox:checked { .. }

您仍然可以检查该复选框的值是否设置为是否需要对子表单组（提交者字段）执行操作。

注意：请勿在子表单组中使用所需的属性和经过验证的类型（如电子邮件）。当浏览器在隐藏这些字段时尝试验证提交表单时，这可能会导致错误。

从localstorage中检索复选框状态时显示/启用/隐藏字段

2 个答案: