JQUERY Chaining variables in an if-statement, logical operators

Question

I currently have 2 groups of checkboxes. The submit button of the form shall stay disabled until at least one checkbox of each group is checked. By now it works just for the first category (name/id all the same except the number, you'll see). 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);
        }
    });
});

I have the current code in the jsfiddle: https://jsfiddle.net/g4jcjn51/

So I thought about sth. like this (which doesn't work):

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

Any solution? Thanks!

falinsky · Accepted Answer · 2015-05-23 23:28:23Z

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);
            }
        });

answered May 23, 2015 at 23:28

falinsky

7,4454 gold badges34 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kristyna · Accepted Answer · 2015-05-23 23:29:21Z

1

What about counting checked checkboxes like this:

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.");
}

answered May 23, 2015 at 23:29

kristyna

2,2674 gold badges33 silver badges46 bronze badges

Comments

davidkonrad · Accepted Answer · 2015-05-23 23:48:10Z

1

You could wrap it into two groups, #group1 and #group2 i.e <div id="group1"> etc, and then

$("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);
    }
});

forked fiddle -> https://jsfiddle.net/kee7m06r/

answered May 23, 2015 at 23:48

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Comments

rjpedrosa · Accepted Answer · 2015-05-23 23:36:27Z

You can give your form an id and then select all checkboxes at once and make the verification.

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

StriplingWarrior · Accepted Answer · 2015-05-23 23:52:30Z

I'd suggest you group your checkboxes using a <div> or a <fieldset>, so that you can easily tell which items are in which group. Then you should be able to easily figure out whether all the groups have at least one checked input.

$(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

One big advantage to this approach is that it follows the open/closed principle: you don't have to change your javascript code at all if you add more groups of checkboxes.

Whoever down-voted this answer, please share the reason. A down-vote isn't worth much if you don't provide an explanation.

Collectives™ on Stack Overflow

JQUERY Chaining variables in an if-statement, logical operators

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related