根据类禁用表tr td

时间:2013-11-27 19:23:37

标签: jquery css

如果td具有“age”类,我需要在点击时向表行添加背景。我尝试使用has类来检查类是否存在。似乎没有用。 JSFIDDLE

无法删除相应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');

        });
});

1 个答案:

答案 0 :(得分:1)

您应该使用hasClassprop

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

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