Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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