<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="[ row ]"> <h2>Example moderator form</a></h2> </div> <div class="[ col-xs-12 col-sm-6 ]"> <hr /> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-success" id="fancy-checkbox-success" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-success" class="[ btn btn-success ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-success" class="[ btn btn-default active ]"> OK </label> </hr>  If this is checked, all below options should disappear</hr> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-danger" id="fancy-checkbox-danger" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-danger" class="[ btn btn-danger ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-danger" class="[ btn btn-default active ]"> Copied </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-warning" id="fancy-checkbox-warning" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-warning" class="[ btn btn-warning ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-warning" class="[ btn btn-default active ]"> Title </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-info" id="fancy-checkbox-info" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-info" class="[ btn btn-info ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-info" class="[ btn btn-default active ]"> Picture/video </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-primary" id="fancy-checkbox-primary" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-primary" class="[ btn btn-primary ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-primary" class="[ btn btn-default active ]"> Writer </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" /> <div class="[ btn-group ]"> <label for="fancy-checkbox-default" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-ok ]"></span> <span> </span> </label> <label for="fancy-checkbox-default" class="[ btn btn-default active ]"> Other </label> </div> </div> </div> </div> </div> <div class="container"> <form role="form"> <div class="required-field-block"> <input type="text" placeholder="Optional comment" class="form-control"> <div class="required-icon"> <div class="text"></div> </div> </div> <button class="btn btn-primary">Send</button> </form> </div>

.form-group input[type="checkbox"] { display: none; } .form-group input[type="checkbox"] + .btn-group > label span { width: 20px; } .form-group input[type="checkbox"] + .btn-group > label span:first-child { display: none; } .form-group input[type="checkbox"] + .btn-group > label span:last-child { display: inline-block; } .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child { display: inline-block; } .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child { display: none; }