I’ve got this piece of code and it’s working perfectly, however I don’t understand anything besides the click events.
I looked at reference manuals, jQuery tutorials and many different JavaScript syntaxes. But when it comes down to understanding how something works, looking at advanced example code and trying to compare it with the output totally baffles me.
Will anyone be so kind as to give me a breakdown of what is going on in this fiddle?
https://jsfiddle.net/jakecigar/y35a87bw/
Updated: https://jsfiddle.net/mslilafowler/y35a87bw/7/ (I commented before each line, explaining how I understand the code. I also commented what I didn’t understand)
I realise that by checking the boxes, the button is enabled, and by unchecking the boxes, the button is disabled. That’s what I want it to do. But how would I have known how to create this function simply with the knowledge gained from reference manuals and tutorials?
P.S. I didn’t write the code myself. I’ve just compiled various snippets from StackOverflow answers and combined them to make this code.
I just edited the question to include a jsfiddle with comments explaining what I do and don’t understand, as per your suggestion.
You might find it useful to insert “debugger;” at the start of the block
debugger;
var checkBoxes = $("#wrapper .checkRow")
open the browser’s developer console, then click “Run” in the fiddle. That’ll force a break at the debugger line. Then, you can step thru the function and see what’s happening when various elements are initialized or run. for example, you’d see that
$("#wrapper .checkRow")
gives you a selector for an array of checkboxes:
to help understand what the jQuery selecotrs are doing. You can compare those against what is in the link referenced below.
jQuery()
You indicate you do not understand this entire section of code. I will work through this one with you, but I suggest you try to work through the others by yourself. Do as @parramorej suggests and you can see what is happening as the code is stepped through.
checkAll.change(function() {
//What is going on here?
$("#wrapper .checkRow").prop("checked", this.checked)
submitButton.prop("disabled", !checkAll.prop("checked"));
});
This is an event handler which activates anytime the input with id=“checkAll” is changed. Changed in this case would be if the checkbox is selected or unselected.
The first line of the callback function (seen below), changes the “checked” property of every input with class=“checkRow” to be the same value of the “checked” property of the input with id=“checkAll”. So if you place a check in the Select All checkbox, it’s checked property is true, so it makes the checked properties true for of all the inputs with class=“checkRow”.
$("#wrapper .checkRow").prop("checked", this.checked)
The second line (seen below) is changing the disabled property of the button with id=“submit” to true if any of the inputs with class=“checkRow” have a check mark or false otherwise.
submitButton.prop("disabled", !checkAll.prop("checked"));
Helpful suggestion, I’ll def follow this tip in my learning process. 
This is exactly what I needed to know. I didn’t find this in any tutorial or manual I went through, even reading up on the events/selectors/functions didn’t help because I had a hard time trying to apply it to the output and how it actually works. Thank you for the clear and well explained response, I’ll work through the rest on my own.