JQUERY 在 if 语句中链接变量，逻辑运算符

Question

我目前有 2 组复选框。表单的提交按钮应保持禁用状态，直到每个组的至少一个复选框被选中。 到目前为止，它仅适用于第一个类别（名称/id 除了数字之外都相同，你会看到）。 HTML：

<h3>Choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled="">

JS：

$(function () {
    $("#func1, #func2, #func3").change(function () {
        if (   $("#func1").is(' :checked') || $("#func2").is(':checked') ||    $("#func3").is(':checked')  )   {

            $('.inputButton').attr('disabled', false);
        }
        else {
            $('.inputButton').attr('disabled', true);
        }
    });
});

我在 jsfiddle 中有当前代码：https://jsfiddle.net/g4jcjn51/

所以我想到了某事。像这样（不起作用）：

if (   ($("#func1").is(' :checked') || $("#func2").is(':checked') ||    $("#func3").is(':checked')) && $("#plat1").is(' :checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked')   )
{
}

有什么解决办法吗？ 谢谢！

Answer 1

        $("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4").change(function () {
            if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && ($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )) {

                $('.inputButton').attr('disabled', false);
            }
            else {
                $('.inputButton').attr('disabled', true);
            }
        });

Answer 2

像这样计算选中的复选框怎么样：

var checked1 = $('input[name="func1"]:checked').length;
var checked2 = $('input[name="func2"]:checked').length;

if (checked1 > 0 && checked2> 0){
    //Do your stuff
} else {
   alert("At least one checkbox of each group has to be checked.");
}

Answer 3

您可以将其包装成两组，#group1 和 #group2，即<div id="group1"> 等，然后

$("input[type=checkbox]").on('click', function() {
    if ($("#group1 input:checked").length>0 &&
        $("#group2 input:checked").length>0) {
        $("#idAbfragen").attr('disabled', false);
    } else {
        $("#idAbfragen").attr('disabled', true);
    }
});

分叉小提琴 -> https://jsfiddle.net/kee7m06r/

Answer 4

你可以给你的表单一个id，然后一次选中所有的复选框并进行验证。

HTML：

<h3>Choose func</h3>
<form id="form1">
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled=""/>
</form>

JS：

$(function () {
    $("#form1").find("input[type=checkbox]").change(function () {
        if ($(this).is(' :checked')){                   
            $('.inputButton').attr('disabled', false);
        }
        else {
            $('.inputButton').attr('disabled', true);
        }
    });
});

JSFiddle

Answer 5

我建议您使用<div> 或<fieldset> 对复选框进行分组，以便您可以轻松分辨哪些项目属于哪个组。然后，您应该能够轻松确定是否所有组都至少有一个检查输入。

$(function() {
  $("input[type=checkbox]").change(function() {
    var anySegmentIsUnchecked = $('fieldset').is(':not(:has(:checked))');
    $('.input-button').prop('disabled', anySegmentIsUnchecked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>
      <h3>Choose func</h3>
    </legend>
    <input type="hidden" name="func1" value="" />
    <input type="checkbox" name="func1" value="1" id="func1" />f1
    <br/>
    <input type="hidden" name="func2" value="" />
    <input type="checkbox" name="func2" value="1" id="func2" />f2
    <br/>
    <input type="hidden" name="func3" value="" />
    <input type="checkbox" name="func3" value="1" id="func3" />f3
    <br/>
  </fieldset>
  <fieldset>
    <legend>
      <h3>Choose plat</h3>
    </legend>
    <input type="hidden" name="plat1" value="" />
    <input type="checkbox" name="plat1" value="1" id="plat1" />p1
    <br/>
    <input type="hidden" name="plat2" value="" />
    <input type="checkbox" name="plat2" value="1" id="plat2" />p2
    <br/>
    <input type="hidden" name="plat3" value="" />
    <input type="checkbox" name="plat3" value="1" id="plat3" />p3
    <br/>
    <input type="hidden" name="plat4" value="" />
    <input type="checkbox" name="plat4" value="1" id="plat4" />p4
    <br/>
  </fieldset>
</form>
<input type="submit" name="abfrage" class="input-button" id="idAbfragen" value="submit" disabled>

Fiddle

这种方法的一大优势是它遵循open/closed principle：如果您添加更多复选框组，您根本不需要更改您的javascript代码。