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

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

互斥复选框逻辑

1 个答案: