如何使用复选框启用选项并通过本地存储进行保存

Question

不久前我开始学习jQuery和Javascript，在本地存储方面遇到了一些问题。我试图使用复选框来控制select-options，但是我的代码不适用于jQuery1.11.0，因为我以前使用过1.4.4。

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

这是我以前做的http://jsfiddle.net/tfgqhxdw/，与1.4.4jQuery库一起工作的代码，但是我需要它与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

更改所有：

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

至

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

您缺少正确的引号。

工作示例：jsfiddle

Answer 2

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

你可以试试这个。

//启用所有推送选项

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