相互排他的なチェックボックスロジック

Question

ボタンと4つのチェックボックスA、B、C、Dがあります。このボタンは、デフォルトでは無効になっています。

• B、C、Dの任意の組み合わせをチェックすると、ボタンが有効になります。 CおよびDの任意の組み合わせを確認

• はチェックを解除C及びDを確認

• A.のチェックを外し、ボタンを無効にします。

• ただし、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

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

Answer 2

問題のトリッキーなロジックを理解するためには、現実世界の背景を知るために優れているとされています - しかしwth。

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