javascript - 互斥的复选框逻辑

Question

我有一个按钮和 4 个复选框:A、B、C 和 D。该按钮默认处于禁用状态。

• 选中 B、C 和 D 的任意组合即可启用该按钮。

• 选中 C 和 D 的任意组合将取消选中 A。

• 选中 A 将取消选中 C 和 D，并禁用该按钮。

• 但是如果 A 和 B 都被选中，则该按钮将被启用。

这就是我到目前为止所拥有的。

HTML:

<input type="checkbox" value="" name="cb1" id="1cb1">
<input type="checkbox" value="" name="cb1" id="1cb2">
<input type="checkbox" value="" name="cb1" id="1cb3">
<input type="checkbox" value="" name="cb1" id="1cb4">

<button id="b1" class="btn btn-disabled" disabled="disabled">Click me</button>

jquery

        <script>
            $(document).ready(function(){
                $("#1cb1").click(function() {
                    if ($("#1cb2").is(":checked")) {
                     $("#b1").removeAttr("disabled").removeClass("btn-disabled");
                            $("#1cb3").attr("checked",false);
                            $("#1cb4").attr("checked",false);
                    } else {
                        $("#1cb3").attr("checked",false);
                        $("#1cb4").attr("checked",false);
                        $("#b1").attr("disabled", "disabled").addClass("btn-disabled");             
                    }
                });

                $("#1cb3, #1cb4").click(function() {
                    $("#1cb1").attr("checked",false)
                    $("#b1").removeAttr("disabled").removeClass("btn-disabled");
                });

                $("#1cb2").click(function() {
                    if ($("#1cb1").is(":checked")) {
                             $("#b1").removeAttr("disabled").removeClass("btn-disabled");
                            $("#1cb3").attr("checked",false);
                            $("#1cb4").attr("checked",false);
                    } else {
                        $("#b1").removeAttr("disabled").removeClass("btn-disabled");           
                    }
                });
            }); 
        </script>

我知道这有点困惑，这就是为什么我向你们寻求帮助以找到正确的解决方案。

提前致谢。

Answer 1

要理解问题的棘手逻辑，最好了解现实世界的背景 - 但wth。这里是 A-B-C-D 复选框闪烁的灯光;)

    //Checking A unchecks C and D, and disables the button.
    function a() {
        if($("#A").is(":checked")) {
            $("#C, #D").prop("checked",false);
            $("#b1").prop("disabled",true);
        }
    }
    //Checking any combination of C and D unchecks A.
    function cAndD() {
        if($("#C").is(":checked") && $("#D").is(":checked")) {
            $("#A").prop("checked",false);
        }
    }
    //But if A and B are both checked, then the button is enabled.
    function aAndB() {
        if($("#A").is(":checked") && $("#B").is(":checked")) {
            $("#b1").prop("disabled",false);
        }
    }
    //Checking any combination of B, C and D enables the button.
    function bAndCAndD() {
        if($("#B").is(":checked") && $("#C").is(":checked") && $("#D").is(":checked")) {
            $("#b1").prop("disabled",false);
        }
    }
    //because of the "But..." ;)
    var rulesInOrder = {
        "A": [a, aAndB],
        "B": [aAndB, bAndCAndD],
        "C": [bAndCAndD, cAndD],
        "D": [bAndCAndD, cAndD],
    };

    $(document).ready(function(){
        $("input").click(function() {
            rulesInOrder[this.id].forEach(function(rule){rule();});
        });
    });

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<label><input type="checkbox" value="" name="cbA" id="A">A</label><br>
<label><input type="checkbox" value="" name="cbB" id="B">B</label><br>
<label><input type="checkbox" value="" name="cbC" id="C">C</label><br>
<label><input type="checkbox" value="" name="cbD" id="D">D</label><br>
<button id="b1" class="btn btn-disabled" disabled="disabled">Click me</button>