mmt
mmt

Reputation: 161

on Click event for checkbox in Javascript

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

Answers (3)

Gowtham Selvaraj
Gowtham Selvaraj

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

Janani M
Janani M

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

Techy
Techy

Reputation: 2654

Try this

$(".row").change(function() {

if(this.checked){
    //write your code
}
else{
    //write your code
   }
});

Upvotes: 0

Related Questions