如何使用复选框启用选项并通过本地存储保存它们？

Question

不久前我开始学习jQuery和Javascript，我在本地存储方面遇到了一些问题。我正在尝试控制 select - 使用复选框的选项，但是我的代码不适用于 jQuery 1.11.0，因为我之前使用 1.4.4。

预期结果：当我点击任何框时，与其链接的选项将被启用并保存在本地存储中。此外，当我 select 手动选中所有复选框时， select 所有复选框都将被选中（这现在有效，但仅在第一次尝试时有效），并且当一个复选框未被 selected 时， select 将自动取消选中所有元素。此外，select/unselect 全部复选框无法正常工作。

这是我之前使用的 http://jsfiddle.net/tfgqhxdw/，可与 1.4.4 jQuery 库一起使用的代码，但是我需要它与 1.11.0 一起使用，因为我还有其他功能与这个旧库冲突。

这是我目前的代码：

$(function enableall_push() {
    $(".checkbox2").click(function(){
        var b = $(".checkbox2");
        if(b.length == b.filter(":checked").length){
            $("#enableall_push").attr("checked","checked");
        } else {
            $("#enableall_push").removeAttr("checked","checked");
        }
    });

    $('#enableall_push').click(function(event) {
        if(this.checked) {
            $('.checkbox2').each(function() {
                this.checked = true;
            $('#reasonDrop option[value=101^1]').removeAttr('disabled');
            $('#reasonDrop option[value=103^1]').removeAttr('disabled');
            $('#reasonDrop option[value=105^1]').removeAttr('disabled');
                localStorage.setItem(this.value,'checked');
            });
            //FUNCTION
        } else {
            $('.checkbox2').each(function() {
                this.checked = false;

            $('#reasonDrop option[value=101^1]').attr('disabled','disabled');
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
            $('#reasonDrop option[value=105^1]').attr('disabled','disabled');               
                localStorage.setItem(this.value,'');
            });
            //FUNCTION
        }
    });
}); 

$(function push101 () {
    $("#push1").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=101^1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=101^1]').attr('disabled','disabled');
        }
    });

    $("#push1").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=101^1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=101^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

$(function push103 () {
    $("#push2").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=103^1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
        }
    });

    $("#push2").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=103^1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

$(function push105 () {
    $("#push3").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=105^1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=105^1]').attr('disabled','disabled');
        }
    });

    $("#push3").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=105^1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=105^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

谢谢！

Answer 1

您的 select 选项语法错误； 101^1 而不是 101_1.

你可以试试this.

// 启用所有推送选项

$(function enableall_push() {
    $(".checkbox2").click(function(){
        var b = $(".checkbox2");
        if(b.length == b.filter(":checked").length){
            $("#enableall_push").attr("checked","checked");
        } else {
            $("#enableall_push").removeAttr("checked","checked");
        }
    });

    $('#enableall_push').click(function(event) {
        if(this.checked) {
            $('.checkbox2').each(function() {
                this.checked = true;
            $('#reasonDrop option[value=101_1]').removeAttr('disabled');
            $('#reasonDrop option[value=103_1]').removeAttr('disabled');
            $('#reasonDrop option[value=105_1]').removeAttr('disabled');
                localStorage.setItem(this.value,'checked');
            });
            //FUNCTION
        } else {
            $('.checkbox2').each(function() {
                this.checked = false;

            $('#reasonDrop option[value=101_1]').attr('disabled','disabled');
            $('#reasonDrop option[value=103_1]').attr('disabled','disabled');
            $('#reasonDrop option[value=105_1]').attr('disabled','disabled');               
                localStorage.setItem(this.value,'');
            });
            //FUNCTION
        }
    });
});

// 101 ------------------

$(function push101 () {
    $("#push1").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=101_1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=101_1]').attr('disabled','disabled');
        }
    });

    $("#push1").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=101_1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=101_1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

// 103 ------------------

$(function push103 () {
    $("#push2").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=103_1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=103_1]').attr('disabled','disabled');
        }
    });

    $("#push2").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=103_1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=103^1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

// 105 ------------------

$(function push105 () {
    $("#push3").each(function(){
        if (localStorage.getItem(this.value) == 'checked'){
            $(this).attr("checked","true");
            $('#reasonDrop option[value=105_1]').removeAttr('disabled');
        } else {
            $('#reasonDrop option[value=105_1]').attr('disabled','disabled');
        }
    });

    $("#push3").click(function(){
        if($(this).is(":checked")) {
            $('#reasonDrop option[value=105_1]').removeAttr('disabled');
            localStorage.setItem(this.value,'checked');
        } else {
            $('#reasonDrop option[value=105_1]').attr('disabled','disabled');
            localStorage.removeItem(this.value);
        }
    });
});

Answer 2

改变你的所有：

 $('#reasonDrop option[value=103^1]')

到

$("#reasonDrop option[value='103^1']")

您遗漏了正确的引号。

工作示例：jsfiddle

如何使用复选框启用选项并通过本地存储保存它们？

How to enable options using checkboxes and saving them through local storage?

javascript

jquery

checkbox

local-storage