Question

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

分叉小提琴 - ＆gt;的 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代码。

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

5 个答案: