Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.