Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Skill Level Intermediate
In this challenge, we needed to toggle whether these check boxes were enabled or disabled based on the state of this check box and then make the forms submit to different places based on these radio buttons. So first, let's make sure that this thing actually works. So we can see that the page has loaded, and all of these check boxes, no matter how much I would like to click them, are disabled. Click this check box, or its label even, and all of these are enabled or disabled as appropriate. You can check all these, and if I go back up here, and uncheck this box, they're all disabled again. They keep their check state, but they are disabled.
So there is at least a couple of different ways that you could do this. What I'm doing is look at it's checked property and asking, is it true? And then, if so, setting disabled to false; therefore, enabling the check boxes. Then, in my other statement other here. So, if this is false, I'm disabling them again. So, if this is checked, enable everything. If it is not checked, disable everything. And I do this every time that box is clicked. So this is one way to do this. There is a slightly clever way which fits on one line. In this case, I'm setting the disabled property of all those checkboxes to the opposite using this not operator of what ever the toggle is.
So if this is checked I want disable to be set to false so checked is true disabled is false, checked is false disable is true its just a little slightly clever way. Moving on I'm now looking at the two radio buttons each of which has an ID. And then every time one of them is clicked I can set these in separate event listeners because they are not both going to be clicked at once. So, when I click the no radio button; therefore, opting out of the newsletter, it's also selected for me by the browser, and then I am setting the action attribute which is where the form submits of my web form to the page with the response that says nothing about you having subscribed to the mailing list.
And then I'm just doing the opposite for the other one, setting it back to the default which is the one has the message thanking you for subscribing. And so that's how it all breaks down. Disabling all these checkboxes when the page first loads, then doing the toggle here, and setting the action attribute on the form depending on which of these has been clicked.