CODEWITHSUNDEEP
javascriptjqueryhtmllogical-operators
bababow
bababow

Reputation: 55

JQUERY Chaining variables in an if-statement, logical operators

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!

Upvotes: 3

Views: 268

Answers (5)

StriplingWarrior
StriplingWarrior

Reputation: 156748

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.

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85598

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/

Upvotes: 1

rjpedrosa
rjpedrosa

Reputation: 682

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

Upvotes: 0

kristyna
kristyna

Reputation: 2147

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

Upvotes: 1

falinsky
falinsky

Reputation: 7438

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

Upvotes: 1

Related Questions