Reputation: 161
I have a table with following format :
<tbody id="ggwp">
<tr class="r123 disable-it">
<td>
<input type="checkbox" name="item" class="row" statusid="1234">
</td>
</tr>
<tr class="r124">
<td>
<input type="checkbox" name="item" class="row" statusid="1235">
</td>
</tr>
<tr class="r125 disable-it">
<td>
<input type="checkbox" name="item" class="row" statusid="1236">
</td>
</tr>
</table>
Now, I want to call perform some action whenever user will click on checkbox of the rows with 'disable-it' set in the classname. Also the event should be unfired when user will uncheck the checkbox.
Inshort, whenever user will click on checkbox of the rows with classnames ="r123 disable-it" and "r125 disable-it" ; some action must be performed and when user will unclick the checkbox, the event should be unfired/rolled back again.
How can I achieve this ? Thanks in advance for reading :)
Upvotes: 1
Views: 192
Reputation: 478
check if the check box row has class 'disable-it' and performs action
$(document).on("click",".row",function(e) {
//Checks if the row has class disable-it
if($(this).parent().parent().hasClass('disable-it')){
if($(this).prop('checked')){
//some action can be performed
alert('checked');
}else{
//unfired/rolled back again.
alert('rollback');
}
}
});
Upvotes: 1
Reputation: 423
Check this fiddle
$('input[type=checkbox]').click(function(){
//alert('check');
if($(this).is(":checked"))
{
$(this).parent().parent().addClass('disable-it');
}
else if(!$(this).is(":checked"))
{
$(this).parent().parent().removeClass('disable-it');
}
});
Upvotes: 0
Reputation: 2654
Try this
$(".row").change(function() {
if(this.checked){
//write your code
}
else{
//write your code
}
});
Upvotes: 0