/    Sign up×
Community /Pin to ProfileBookmark

Toggle multiple checkbox elements enabled/disabled

Hey, JS experts.

Let’s say I have a form with 4 checkbox input elements. I’d like to have items 2-3 disabled unless/until #1 is checked. I figured I could have an `onchange` event in #1 to call a function that would check it’s status, and based on whether or not it’s selected, change the other 3 to enabled/disabled as applicable.

Assuming that makes sense (I’m open to better ways!), is there some naming convention or such I can use on the other 3 input elements so I can enable/disable them with one command, or would I have to use a separate change command for each?

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@cootheadSep 09.2022 — Hi there NogDog,

I thought that I might drop a CSS solution in before

the JavaScript gurus pop their proboscises in...

[b]HTML[/b]
<i>
</i>&lt;body&gt;
&lt;form action="#"&gt;
&lt;label for="cb1"&gt;option 1&lt;/label&gt;&lt;input id ="cb1" type="checkbox"&gt;&lt;br&gt;
&lt;label for="cb2"&gt;option 2&lt;/label&gt;&lt;input id ="cb2" type="checkbox"&gt;&lt;br&gt;
&lt;label for="cb3"&gt;option 3&lt;/label&gt;&lt;input id ="cb3" type="checkbox"&gt;&lt;br&gt;
&lt;label for="cb4"&gt;option 4&lt;/label&gt;&lt;input id ="cb4" type="checkbox"&gt;&lt;br&gt;
&lt;input type ="reset"&gt;
&lt;/form&gt;
&lt;/body&gt;


[b]CSS[/b]
<i>
</i> #cb2, label[for="cb2"],
#cb3, label[for="cb3"]{
pointer-events: none;
opacity: 0.5;
}
#cb1:checked ~ #cb2,
#cb1:checked ~ label[for="cb2"],
#cb1:checked ~ #cb3,
#cb1:checked ~ label[for="cb3"] {
pointer-events: auto;
opacity: 1;
}


[i]coothead[/i]
Copy linkTweet thisAlerts:
@NogDogauthorSep 09.2022 — @coothead#1646904

Looks like magic. :) I'll give it a try at some point today and see what it does. 👍️
Copy linkTweet thisAlerts:
@NogDogauthorSep 09.2022 — Couldn't get that to entirely work for me (probably user error), but I kludged this JavaScript together that seems to do the trick, even if kind of ugly. 🤷

Well...crap...can't post my code here, and it's not important enough that I'm going to go post it on jfiddle or such. :(
Copy linkTweet thisAlerts:
@cootheadSep 09.2022 — > @NogDog#1646906

> I'm going to go post it on jfiddle or such


I am trembling in anticipation.

[i]coothead[/i]
Copy linkTweet thisAlerts:
@JMRKERSep 11.2022 — @coothead#1646908 Maybe the trembling is from those northern latitudes you live in. Global warming hasn't gotten there yet? 😆
Copy linkTweet thisAlerts:
@cootheadSep 11.2022 — > @JMRKER#1646922

> Global warming hasn't gotten there yet?


Unfortunately it has ! ! !

[url=https://www.metoffice.gov.uk/about-us/press-office/news/weather-and-climate/2022/red-extreme-heat-warning-ud][b][u][color=red]Record breaking temperatures for the UK[/color][/u][/b][/url]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@hebkyeSep 11.2022 — Hm. Very interesting and young I also recently began to be interested in something new, such as aviation! Came across an excellent article on this subject [https://mylearninghub.com/industries/automotive](https://mylearninghub.com/industries/automotive) , I think it will be interesting and you to read
Copy linkTweet thisAlerts:
@marionlankfordSep 12.2022 — Yes. More, it is essential if you are dealing with radio button groups.

**Links removed by Site Administrator so it doesn't look like you're spamming us. Please don't post them again.**
×

Success!

Help @NogDog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 11.14,
social: @webDeveloperHQ,
});

legal: ({
terms: of use,
privacy: policy
analytics: Fullres
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @aldoushuxley,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,
)...