Sandy Sandy - 26 days ago 9
CSS Question

JQuery: How to apply a class to a specific data onclick of radio button inside that row in a table

I have a table which has records. I am trying to apply a css class to a data inside a table row onclick of radio button in that row. But what is happening is the css gets applied to all the records.

Now as we can see below for the TR having value as lion i want the disabled class to be applied to that span class only when i click on the radio button of that field row.

But what is happening is the disabled class gets applied to that span class but in all the rows. I want that class applied to that row only.

Below is an example and what I tried:



$('tr').click(function() {
$('.show-animals .animal-click').addClass('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<div class="label show-animals" id="animalClass">
<div class="animal-data">
<span class="animal-click disabled">No</span>
<tr>
<td>
<input type="text" value="Lion">
</td>
</tr>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="label show-animals" id="animalClass">
<div class="animal-data">
<span class="animal-click">No</span>
<tr>
<td>
<input type="text" value="Tiger">
</td>
</tr>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="label show-animals" id="animalClass">
<div class="animal-data">
<span class="animal-click">No</span>
<tr>
<td>
<input type="text" value="Hen">
</td>
</tr>
</div>
</div>
</td>
</tr>





Please guide.

Answer

check out what I have done here mate http://jsfiddle.net/SCK5A/3434/

$('.show-animals .animal-click').on('click',function(){
 $(this).toggleClass('disabled');
})
Comments