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

Question

我目前有 2 组复选框。表单的提交按钮应保持禁用状态，直到选中每个组中的至少一个复选框。到目前为止，它只适用于第一类（name/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

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

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 4

我建议您使用 <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 代码。

Answer 5

您可以将其分成两组，#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);
    }
});

分叉 fiddle -> https://jsfiddle.net/kee7m06r/

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

JQUERY Chaining variables in an if-statement, logical operators

javascript

jquery

html

logical-operators