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

Question

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

预期结果:当我单击任何框时，与其链接的选项将被启用并保存在本地存储中。另外，当我手动选择所有复选框时，将选中全选复选框(现在有效，但仅在第一次尝试时)，并且当未选择一个复选框时，将自动取消选中全选元​​素。此外，全选/取消全选复选框无法正常工作。

这是我之前的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

更改您的所有:

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

到

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

您缺少正确的引号。

工作示例:jsfiddle