CODEWITHSUNDEEP
jquerycss
dragonfly
dragonfly

Reputation: 3227

disabling table tr td based on the class

I need to add background to table rows on click, if td has class "age". I tried to check whether the class is present or not using has class. Doesn't seem to work. JSFIDDLE

Couldn't remove check mark from the corresponding tds

HTML

<a href="#" id="age">age</a>

<table>
    <tr class="play">
        <td>&nbsp;</td>
        <td class="a"><label> <input id="cover-1" name="cover-1" type="checkbox" checked="checked" class="cover" tabindex="1"/>
                              </label></td>
        <td class="b"><label> <input id="age-1" name="age-1" type="checkbox" checked="checked" class="age" tabindex="1"/>
                              </label></td>

    </tr>
    <tr class="age">
        <td>&nbsp;</td>
        <td class="a"><label> <input id="cover-1" name="cover-1" type="checkbox" checked="checked" class="cover" tabindex="1"/>
                              </label></td>
        <td class="b"><label> <input id="age-1" name="age-1" type="checkbox" checked="checked" class="age" tabindex="1"/>
                              </label></td>

    </tr>
    <tr class="age">
        <td>&nbsp;</td>
        <td class="a"><label> <input id="cover-2" name="cover-2" type="checkbox" checked="checked" class="cover" tabindex="1"/>
                              </label></td>
        <td class="b"><label> <input id="age-2" name="age-2" type="checkbox" checked="checked" class="age" tabindex="1"/>
                              </label></td>

    </tr>
</table>

CSS

td {
    border: 0;
    border-collapse: collapse;
}
.tr-disable {
    background-color: #ccc;
}

JS

$(function(){
    $("#age").click(function(){

          $('tr').each(function() {
            if($(this).has('.age')) {
              $(this).addClass('tr-disable');
                $(this).find('td[type=checkbox]').removeAttr('checked');
            }
          });

          $('this').prop('disabled','true');

        });
});

Upvotes: 0

Views: 1039

Answers (1)

tymeJV
tymeJV

Reputation: 104775

You should be using hasClass and prop

if ( $(this).hasClass("age") ) {
    $(this).addClass("tr-disable").find("td :checkbox").prop("checked", false);
}

http://jsfiddle.net/isherwood/8sP3Q/6/

Upvotes: 1

Related Questions