Specify one Checkbox to make a selected Row

Question

The direction to the goal>
Use one checkbox only that has the class asdf that should be enable to select the row by changing the background color to yellow. The remaining of the checkbox (to the right side) shall NOT enable to change the background color to yellow.
In a short summary, the second and the third checkbox should not do anything.

Obstacle>

The problem that I'm facing is that don't know how to solve it.

If possible not to change the structure of the html because it is used today in production phase.

http://jsfiddle.net/oc1n1c49/2/

Thank you!

$("#candy input[type=checkbox]").on("change", function () {
    if (this.checked) {
        $(this).parents('tr').addClass('selected');
        $('#dd').removeClass('selected');
    } else {
        $('#bbbbbb').prop('checked', false);
        $(this).parents('tr').removeClass('selected');
        $('#dd').removeClass('selected');
    }
});


$('#bbbbbb').click(function () {
    var checked = $("#bbbbbb").is(':checked');
    $(".asdf").each(function () {
        $(this).prop('checked', checked);
        if (checked) {
            $(this).parents('tr').addClass('selected');
            $('#dd').removeClass('selected');
        }
        else {
            $(this).parents('tr').removeClass('selected');
            $('#dd').removeClass('selected');
        }
    });
});

tr.selected {
    background-color: #FEF0BF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="candy" >
	<tr id="dd">
		<th><input type="checkbox" id="bbbbbb" /></th>
		<th width="20">a</th>
		<th width="20">b</th>
		<th width="20">c</th>
		<th width="20"">d</th>
		<th width="20">e</th>
		<th width="20">f</th>
		<th width="20">g</th>
		<th width="20">h</th>
	</tr>
	<tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td><input type="checkbox" /></td>
		<td><input type="checkbox" /></td>                                 
	</tr>
	<tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td><input type="checkbox" /></td>
		<td><input type="checkbox" /></td>                                  
	</tr>
    <tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td><input type="checkbox" /></td>
		<td><input type="checkbox" /></td>                                  
	</tr>
</table>

Answer 1

If I understand you corectly, this will do. You select only checkbox with class 'asdf' and change background color of the row where that checkbox located. Other two checkboxes in that row do nothing.

$('.asdf').on('change', function(){
    if($(this).attr("checked") == 'checked')
        $(this).parent().parent().css('backgroundColor', '#ff0');
    else
        $(this).parent().parent().css('background', 'none');
});

Answer 2

To strengthen the answer by @Binvention you can use the exiting selector and add the class as well. This would be useful if the class asdf was used on other elements as well and not just the inputs

$("#candy input[type=checkbox].asdf").on("change", function () {
    ...
});

Additionally if the class was not present then you could select the first checkbox in the first row of each column using the following

$("#candy tr > td:first-of-type > input[type=checkbox]:first-of-type").on("change", function () {
    ...
});

Though I doubt this would be more efficient then just targeting the class directly, and also if the location of checkbox changed then this selector would break. I recommend using the class if you have it.

Answer 3

For your selector just select the specific class of the first text boxes rather then all of the text boxes like this

$('#candy .asdf').on('change' function(){
     //your code
 });