If at least one checkbox is checked, enable button

by Jens Grochtdreis

HTML

<h1>Button should be enabled if at least one checkbox is checked</h1>

<form>
    <input type="checkbox" name="option-1" id="option-1"> 
    <label for="option-1">Option 1</label>
    
    <input type="checkbox" name="option-2" id="option-2"> 
    <label for="option-2">Option 2</label>
    
    <input type="checkbox" name="option-3" id="option-3">
    <label for="option-3">Option 3</label>
    
    <input type="checkbox" name="option-4" id="option-4"> 
    <label for="option-4">Option 4</label>
    
    <input type="checkbox" name="option-5" id="option-5"> 
    <label for="option-5">Option 5</label>

    <span class="info">Click one of the options to submit</span>    
    <input type="submit" value="Do thing">

</form>

CSS

span.info,
input[type="checkbox"]:checked ~ input[type="submit"] { display: block; }

input[type="checkbox"]:checked ~ span.info,
input[type="submit"]
{ display: none; }


input[type="checkbox"]:checked + label { color: red; }