FD - wh93kn7n

by Norlihazmey Ghazali

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
    <div class="row" style="margin-top: -2%;">
        <table class="table table-bordered">
            <thead>
                <tr class="danger">
                    <!--Hearder here-->
                    <th></th>
                    <th></th>
                    <th>
                        <th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div>
                            <label>NAME1</label>
                        </div>
                    </td>
                    <td>
                        <div>
                            <label>Select:</label>
                            <select id='first'>
                                <option value='RHS'>RHS</option>
                                <option value='LHS'>LHS</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div>
                            <input class="myCheckbox" data-target="left_one_side" type="checkbox"=/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <label>NAME2</label>
                        </div>
                    </td>
                    <td>
                        <div>
                            <label>Select:</label>
                            <select id='first_selected'>
                                <option value='LHS'>LHS</option>
                                <option value='RHS'>RHS</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div>
            ...

CSS

.myDiv {
  padding:5px;
  border:1px solid black;
  background-color:blue;
  color:white;
  margin:2px;
}
.disabled {
  background-color:grey;
  color : #C0C0C0;
  opacity : 0.1;
}

JavaScript

$(document).on('click', '.myCheckbox', function () {
  var target = $(this).data('target');    
  if ($(this).is(':checked')) $('#' + target).addClass('disabled');
  else $('#' + target).removeClass('disabled');
});