相互排斥复选框逻辑

我有一个按钮和4个复选框：A，B，C和D.该按钮在默认情况下被禁用。相互排斥复选框逻辑

检查B，C和D的任意组合启用该按钮。
检查C和d的任意组合取消选中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>

我知道这是一个有点乱，这就是为什么我要问你的帮助球员找到正确的解决方案。

在此先感谢。

来源

2016-04-08 TFOH

的 “互斥”，表明异或。 – Bakudan

我试图通过的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/

来源

2016-04-08 20:14:36

嗨lukfcb。谢谢你的评论。我看了看你的小提琴，它非常接近！但是，如果您选中复选框A和B，然后取消选中复选框A，则该按钮将被禁用。它应该被启用。另外，选择复选框B和/或C应该启用该按钮。谢谢您的帮助。 – TFOH

嗨TFOH，现在你可以适应我的代码！ –

要了解你的问题的棘手的逻辑，它会一直很好的了解真实的世界背景 - 但是。这里的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>

来源

2016-04-08 20:49:34

相互排斥复选框逻辑

回答

相关问题