即使刷新,如何使用localStorage保持禁用输入

时间:2014-06-24 16:09:41

标签: javascript jquery html html5 local-storage

我想要做的是,如果我单击单选按钮上的No它将禁用即使我刷新或关闭浏览器并再次重新打开它仍然禁用,直到我点击Yes按钮禁用将走了。

如何使用localStorage?

测试链接:http://jsfiddle.net/5kcsn/156/

HTML:

<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" /> Yes<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" /> No <br>

<input type="text" name="test" id="test" />

脚本:

$(document).ready(function () {

    $('#test').on("keyup change", function () {
       debugger;
        localStorage.setItem($(this).attr("id"), $(this).val())
    });


    $('#test').each(function (ind, val) {
            debugger;

         $(val).val(localStorage.getItem($(val).attr("id")))

    });

    $('#employed_v1, #employed_v0').on("change", function () {
        localStorage.setItem('employed', $(this).attr("id"))
    });

    $('#' + localStorage.getItem('employed')).attr('checked', true);

$('[id="employed_v0"]').on('click', function(){
        $('#test').val('');
        localStorage.removeItem('test');
        $('#test').prop('disabled', true);        
     });
$('[id="employed_v1"]').on('click', function(){
        $('#test').prop('disabled', false);
     });

});

1 个答案:

答案 0 :(得分:0)

尝试以下代码,检查演示,更改单选按钮并在文本框中输入一些文本并再次运行jsfiddle,它将保持相同的状态。

<强> DEMO

$(document).ready(function(){
    if(localStorage.getItem("itmEmployee") == "Yes")
        $("#employed_v1").prop("checked", true);
    else
        $("#employed_v0").prop("checked", true);

    if(localStorage.getItem("itmEmployee") == "Yes")
        $("#test").prop("disabled", false);
    else
        $("#test").prop("disabled", true);

    $("#test").val(localStorage.getItem("itmTest"));

    $("[name=employed]").on("change", function(){
        localStorage.setItem("itmEmployee", $(this).val());

        if($(this).val() == "Yes")
            $("#test").prop("disabled", false);
        else
            $("#test").prop("disabled", true);
    });

    $("#test").on("change", function(){
        localStorage.setItem("itmTest", $(this).val());
    });
});