"Enable div by checking checkbox"
Bootstrap 3.3.0 Snippet by mdashikar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div class="row"> <div class="col-md-8 col-md-offset-2"> <label>Car Tinting / Headlight Services </label> <div class="row"> <div class="col-md-12"> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <div class="pull-left" style="padding-right:25px"><img src="https://loremflickr.com/320/240" width="80" height="60"></div> <div class="checkbox pull-center"> <label ><input type="checkbox" id="one" class="click" value="Coupe">Coupe</label> </div> </div> </div> </div> <div class="panel-body" id="firstDiv"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th></th> <th class="hidden-xs">Options</th> <th>Price</th> <th>Quantity</th> </tr> </thead> <tbody> <tr> <td></td> <td class="hidden-xs">Remove Tint (2 windows)</td> <td>$ 269.99 </td> <td> <div class="form-group"> <select class="form-control" id="two" disabled> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </div> </td> </tr> <tr> <td></td> <td class="hidden-xs">Don't Remove Tint (2 windows)</td> <td>$ 119.99 </td> <td> <div class="form-group"> <select class="form-control" id="two" disabled> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>
// Demo using plain javascript var two = document.getElementById("two"); var clickBtn = document.getElementsByClassName('click')[0]; // Disable the button on initial page load two.disabled = true; //add event listener clickBtn.addEventListener('click', function(event) { two.disabled = !two.disabled; });

Related: See More


Questions / Comments: