"Build an Interactive Story App with Swift" was retired on May 31, 2020.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice DOM Manipulation: Checkboxes!
You have completed Practice DOM Manipulation: Checkboxes!
Preview
This video covers one solution to the challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back!
0:00
How did it go?
0:01
Did you get the conflicting
checkboxes disabled?
0:02
Don't worry if you didn't,
keep watching to see one solution, and
0:05
then go ahead and give it another try.
0:09
First I will grab the form element
from the DOM, and store it in a
0:11
variable named form
0:15
Next, I will attach a change
event listener to the form.
0:22
With this technique, the form listens for
changes in all the checkboxes.
0:25
Within the EventListener,
I am using the event.target property so
0:36
I can capture the checkbox that
triggered the change event and
0:40
assign it to the
currentCheckbox variable.
0:44
To categorize the checkboxes,
I am utilizing the data attributes.
0:49
I will first need to extract
the data-combat-style attribute value of
0:53
the currentCheckbox.
0:57
This value informs us about the type,
such as hero-melee or enemy-ranged.
0:59
I will use the dataset property, which
provides access to all the attributes that
1:04
begin with "data-"
present on an element.
1:08
However, note the naming
conversion, in JavaScript,
1:11
instead of using hyphenated names like
data-combat-style, we use camelCase.
1:15
So combat-style becomes combatStyle.
1:20
So now that I know the combat
style of the currentCheckbox,
1:25
I can select all other checkboxes
with the same combat-style attribute.
1:28
I use the querySelectorAll method to
ensure I got every checkbox of that
1:32
combat style.
1:37
Next, I will create a for loop to iterate
over each conflicting checkbox, so
1:40
I can conditionally set the boolean
value of the disabled property for
1:44
each of the checkboxes.
1:49
Inside the loop, I will target each
of the checkboxes individually and
1:55
assign them to the
conflictingCheckbox variable.
1:59
Finally, I will set the disabled state of
the conflictingCheckbox to true only if
2:08
the current checkbox is checked.
2:13
And the conflictingCheckbox isn't the
exact checkbox as the currentCheckbox.
2:16
Otherwise, it will enable
the conflictingCheckbox by setting
2:21
the disabled value to false.
2:25
The outcome of this logic ensures
that when a user checks a checkbox,
2:27
all other checkboxes with the same
combat-style are disabled,
2:32
preventing the user from selecting them.
2:35
However, the checkbox they
initially checked remains active,
2:39
ensuring they can uncheck it if they wish.
2:42
Let's move over to the browser
to see the code in action.
2:47
There we have it.
2:51
All conflicting checkboxes
are now being disabled.
2:53
Was your approach to solving this
practice different from mine?
2:56
If so, that's perfectly fine.
2:59
There are always multiple ways to
reach the same outcome when coding.
3:01
I hope you feel better about handling
conflicting checkbox choices.
3:05
I'll see you next time.
3:09
Until then, happy coding.
3:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up