There are two checkbox , it is necessary that when you click on the first, the second is turned off (or even others, for example). In this case, I work only in one direction. Because of the order of html. I mean, since the input / label first one is higher, then it works, the second one does not react. JS I do not know, so I'm trying to collect a bike from the sticks.

Question: Is it possible to implement this via CSS or do I need to resort to scripts?

 input, label { display: inline-block; } /* 1 > 2 */ #ch-areas:checked ~ .sh-islands { pointer-events: none; } #ch-areas:checked ~ .sh-islands .tx-islands { color: grey !important; } /* 2 > 1 */ #islands:checked ~ .sh-areas { pointer-events: none; } #ch-areas:checked ~ .sh-areas .tx-areas { color: grey !important; } 
 <input type="checkbox" class="show-areas checkbox" id="ch-areas" /> <label for="ch-areas" class="sh-areas"><span class="label-text tx-areas">1</span></label> <br> <input type="checkbox" class="show-islands checkbox" id="islands" /> <label for="islands" class="sh-islands"><span class="label-text tx-islands">2</span></label>

  • can the radio element be better suited for this task? - Jigius

2 answers 2

I propose such a solution, from the choice of what other checkbox will the specific checkbox fit into the classes

 let cb = [...document.querySelectorAll('.cb')]; let change = e => e.disabled = cb.filter(c => c.checked && e.classList.contains(c.id)).length cb.forEach(c => c.onchange = () => cb.forEach(change)) 
 * { user-select:none; } input { display:none; } label { font-size: 40px; border: solid; padding: 0 10px 0 10px ; cursor: pointer; } input[disabled] + label { color: gray; cursor: default; pointer-events: none; } input:checked + label { color: red; } 
 <input id="cb1" type="checkbox" class="cb cb4 cb3"><label for="cb1">1</label> <input id="cb2" type="checkbox" class="cb cb4 cb3"><label for="cb2">2</label> <input id="cb3" type="checkbox" class="cb cb1 cb2"><label for="cb3">3</label> <input id="cb4" type="checkbox" class="cb cb1 cb2"><label for="cb4">4</label>

  • You first explain that this code (ES6) does not start just like that. We must first collect the Babel. - Alexey Kapustsin
  • @AlexeyKapustsin will not start in internet explorer? ) - Stranger in the Q
  • one
    @IlliaMei but of course, only I will correct the code later, ran away from the company - Stranger in the Q
  • one
    @IlliaMei corrected - Stranger in the Q
  • one
    @IlliaMei look at the update, maybe it will do? - Stranger in the Q

To do this, usually used radio-butoon .

Just change their display with CSS

  • What if you need to do the next actions, clicked one checkbox, zadisaybelis some other, not all, for example, and when you click on another zadiseybelis, some of those who were already in disible, but not all, then the radio will not be relevant. A question about checkboxes, not radio buttons. But there is a chance that @IlliaMei just does not understand what he is doing! - And
  • @And don't understand, for example? And radio will not work, because I do not have a questionnaire, but a map on which objects are displayed / disabled. - Illia Mei
  • @IlliaMei, That's why I said =) That the radio will not work. and you should create a question more correctly and describe the task in more detail. Add to the question a detailed description of what you want and what you already have. To make it clear what you are doing. And yes, try using the pseudo-class :disabled . But still there is a chance that this will not be possible without a script or attribute. - And
  • @IlliaMei in this case, you have to resort to using JavaScript - Alexey Kapustsin
  • @And Honestly, I don’t quite understand where, why and what will give me specifically :disabled ? In fact: if 1 is on - 2 is off, and vice versa. - Illia Mei