I am attempting to create a function that checks if all checkboxes are checked and then changes the class of a button accordingly. However, my code does not seem to be functioning as expected and I am unsure why.
<input type="checkbox" id="check1" onchange="checkIfChecked();" class="checkThis" value="check 1"> Check 1<br />
<input type="checkbox" id="check2" onchange="checkIfChecked();" class="checkThis" value="check 2"> Check 2<br />
<input type="checkbox" id="check3" onchange="checkIfChecked();" class="checkThis" value="check 3"> Check 3<br />
<input type="checkbox" id="check4" onchange="checkIfChecked();" class="checkThis" value="check 4"> Check 4<br />
<input type="checkbox" id="check5" onchange="checkIfChecked();" class="checkThis" value="check 5"> Check 5<br /><br />
<a href="#" style="width:190px;display:block;" id="absenden" class="button-theme-disable">
<span class="span_outer">
<span class="span_right">
<span class="span_left">
<span style="width: 182px;" class="span_inner">Save & Close</span>
</span>
</span>
</span>
</a>
function checkIfChecked() {
if ($('.checkThis input[type="checkbox"]').not(':checked').length == 0) {
$('#absenden').removeClass('button-theme-disable');
$('#absenden').addClass('button-theme');
} else {
$('#absenden').removeClass('button-theme');
$('#absenden').addClass('button-theme-disable');
}
};
Here is a demo: https://jsfiddle.net/bt35r2tc/1/
Can anyone spot what mistake I might have made?