互斥复选框逻辑

Question

I have a button and 4 checkboxes: A, B, C and D. The button is disabled by default.

• Checking any combination of B, C and D enables the button.

• Checking any combination of C and D unchecks A.

• Checking A unchecks C and D, and disables the button.

• But if A and B are both checked, then the button is enabled.

This is what I have so far.

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>

I know it's a bit of a mess, which is why I'm asking you guys for help in finding the correct solution.

Thanks in advance.

Answer 1

To understand the tricky logic of your problem, it would have been good to know the real world background - but wth. here are the ABCD checkbox blinking lights ;)

  //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> 

Answer 2

I tried to solve by jsFiddle, see if it helps you:

$(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/