Reputation: 55
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
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>
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
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
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);
}
});
});
Upvotes: 0
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
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