How to disable click on the button ( <input type="image"> ) if the checkbox is not active ( <input type="checkbox"> )?

The solution should be in pure CSS.

  • one
    css cannot forbid actions, you can hide a button on css, or show another - korytoff
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

UPD

It’s possible to ban css, as it turned out, with the pointer-events option in the answer @ zenden2k.

There are 2 options without a ban:

Option 1

Hide the button altogether until it is checked

 input + button { display: none; } input:checked + button { display: inline; } 
 <label for="check">ЧСкбокс</label> <input id="check" type="checkbox" /> <button>Кнопка</button>

Option 2

Show the stub instead of the button until it is checked

 input + button { display: none; } input:checked + button { display: inline; } input:checked + button + button { display: none; } 
 <label for="check">ЧСкбокс</label> <input id="check" type="checkbox" /> <button>Кнопка</button> <button disabled="disabled">Кнопка</button> 

     input+input { opacity: .5; pointer-events: none; } input:checked+input { opacity: 1.0; pointer-events: auto; } 
     <input type="checkbox"> <input type="image">

    • And if the button is made like this: <input type = "image" src = "img / middle / 2.2 / button !!!. Png" alt = "Watch"> and the checkbox: <input type = "checkbox" class = "checkbox" id = "checkbox"> can I somehow apply the second answer? - SvArt713