Question

我有一个表，每行包含文档名称，每行的开头都有一个复选框。某些复选框已禁用。我想将text-decoration:line-through添加到该行，以便用户可以轻松识别该行，因为复选框已禁用，因此无法选择该行。如何使用JavaScript或jQuery完成？

在下面的示例中，Doc名称为2的行应该是直通式。

<tr>
    <td>
    <input type="checkbox" name="doclist" id="someId" value="someId"  onchange="updateList('someId')">Doc name 1
    </td>
</tr>

<tr>
    <td>
    <input type="checkbox" name="doclist" id="AnotherId" value="AnotherId"  onchange="updateList('AnotherId')" disabled>Doc name 2
    </td>
</tr>

我尝试了下面的内容。

$('input[type="checkbox"]').filter(function() {
var disabledRow = this.disabled;
disabledRow.addClass("lineThrough");
});

CSS

.lineThrough{
text-decoration:line-through;
}

Answer 1

DEMO

$('table tr td input[type="checkbox"]').each(function(){
    if($(this).prop('disabled')){
       $(this).parents('tr').css('text-decoration','line-through');
    }
});

如果您想使用课程

$('table tr td input[type="checkbox"]').each(function () {
    if ($(this).prop('disabled')) {
        $(this).parents('tr').addClass('lineThrough');
    }
});

建议UweB

.closest('tr')比.parents('tr')

快

$('table tr td input[type="checkbox"]').each(function () {
    if ($(this).prop('disabled')) {
        $(this).closest('tr').addClass('lineThrough');
    }
});

Answer 2

$('input[type="checkbox"]:disabled').parent().addClass('lineThrough');

如果禁用该复选框，则在表格中排成一行

2 个答案: