Create a function which enables and disables the submit button depending on a checkbox input

Create a function which enables and disables the submit button depending on a checkbox input

Okay, so I am having a hard time trying to understand how a "toggle" effect like this should be written.

So I have a form, with a main checkbox-input field, some dynamically added checkbox-input fields, and a submit button.

What I am trying to achieve is, when the main checkbox (labelled as "Select All") is checked, to enable the submit button, and when it is unchecked, to disable the submit button.

I also want the button to be disabled if NO checkboxes are selected, and I found a nice piece of code for that from another user like so:


/*Disable submit button if no checkboxes are selected*/
var checkBoxes = $("#wrapper .checkRow");
checkBoxes.change(function () {
    $('#submit').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.change(); // or add disabled="true" in the HTML

Here's the entire fiddle:

This is the part which I attempted myself, and it's obviously not working as expected. The button won't disable/enable if I uncheck/check the main checkbox:

$("#checkAll").change(function(){
var checkAll = $("#checkAll");
if ( checkAll.attr("checked") == "checked") {
$("#submit").removeAttr("disabled");
} else {
$("#submit").attr("disabled");
}
});

It's a little tricky because my content is going to be dynamic, and I was told to use something like

$("#main-wrapper").on("click", "classnames", function(){
//code here
});

instead of the normal jQuery .onclick() function. Now I am quite unsure of how to apply exactly that syntax to my existing code.


Please excuse the long post. Been searching for a solution for hours...But creating my own jQuery "toggle" effect is really not coming to me. I can't understand it.