Menu
Community /Pin to ProfileBookmark
@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]
[b]CSS[/b]
[i]coothead[/i]
@NogDogSep 09.2022 — #@coothead#1646904
Looks like magic. :) I'll give it a try at some point today and see what it does. 👍️@NogDogSep 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. :(@cootheadSep 09.2022 — #
I am trembling in anticipation.
[i]coothead[/i]@cootheadSep 11.2022 — #
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]
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
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?
Sign in
to post a comment8 Comments(s) ↴
1
@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><body>
<form action="#">
<label for="cb1">option 1</label><input id ="cb1" type="checkbox"><br>
<label for="cb2">option 2</label><input id ="cb2" type="checkbox"><br>
<label for="cb3">option 3</label><input id ="cb3" type="checkbox"><br>
<label for="cb4">option 4</label><input id ="cb4" type="checkbox"><br>
<input type ="reset">
</form>
</body>
[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]
0
@NogDogSep 09.2022 — #Looks like magic. :) I'll give it a try at some point today and see what it does. 👍️
0
@NogDogSep 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. :(
0
@cootheadSep 09.2022 — #>@NogDog#1646906
> I'm going to go post it on jfiddle or such
I am trembling in anticipation.
[i]coothead[/i]
0
@cootheadSep 11.2022 — #>@JMRKER#1646922
> Global warming hasn't gotten there yet?
Unfortunately it has ! ! !
[i]coothead[/i]