互斥复选框逻辑

Mutually exclusive checkbox logic

本文关键字：复选框      更新时间：2024-04-10

我有一个按钮和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>

我知道这有点乱，这就是为什么我请求你们帮助找到正确的解决方案。

提前谢谢。

要理解问题的复杂逻辑，最好了解真实世界的背景——但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>

我试着用jsFiddle解决，看看它是否对你有帮助：

$(document).ready(function(){
   $("input[type='checkbox']").click(function() {
      var checkA = false;
      if($("#1cb1").is(":checked") && $(this).attr("id") != "1cb3" && $(this).attr("id") != "1cb4"){
        $("#1cb3").attr("checked", false);
        $("#1cb4").attr("checked", false);
        checkA = true;
      } 
      if ($("#1cb3").is(":checked") && $("#1cb4").is(":checked") && !$("#1cb2").is(":checked") && !checkA){
        $("#1cb1").attr("checked", false);
      }  
      if (($("#1cb1").is(":checked") && $("#1cb2").is(":checked"))
                || ($("#1cb2").is(":checked") && $("#1cb3").is(":checked"))
                || ($("#1cb2").is(":checked") && $("#1cb4").is(":checked"))
          || ($("#1cb3").is(":checked") && $("#1cb4").is(":checked"))) {
        $("#b1").removeAttr("disabled").removeClass("btn-disabled");
      }else{
        $("#b1").attr("disabled", "disabled").addClass("btn-disabled");
      }
    });
});

https://jsfiddle.net/lukfcb/pyyar65a/

相关文章：