Question

我想禁用父项为红色并且data-id =“parent”的输入复选框。实际上有很多行，但是BIC代码不存在，我已经检查过并显示为红色。当我们单击父行时，子行将默认展开，不显示。我已经尝试了很多时间但没有成功，以下是我想要的截图：

Image2

这是我试过的代码：

$('#table1 tr').each(function(){        
    var attr = $('td').find(".openmodelsepa");  
    $(attr).parents('tr').css('background-color','#f2dede');
    $(attr).parents('tr').next('tr[data-id="child"]').each(function(){
            $(this).find('td').each (function() {
              $(this).find('input[name="invoicearr[]"]').prop('disabled', true);
            });
    });     
});

这样的HTML：

<table id="table1" class="tablesorter">
    <tbody id="tbody">
            <tr data-id="parent" class="parent_172" onclick="show_lines(172)">
                        <td style="text-align:right;"><input type="checkbox" class="contactsepa" data-contact="172" id="check0" data-mainprice="786.5" name="invoicearr[]" style="display:none" value="786.5"></td>
                        <td>Aegis Wervingg</td>
                        <td></td>
                        <td>NL0000000000000000</td>
                        <td>MYAC007</td>
                        <td>50004</td>
                        <td></td>
                        <td class="parent_total">786.5 </td>
                        <td>Open Invoices </td>
                        <td></td>
        </tr>
        <tr data-id="child" class="child_172" style="display:none">
                        <td style="text-align:right;"><input type="checkbox" class="contactsepa" data-contact="172" id="check1" data-mainprice="786.5" name="invoicearr[]" style="display:block" value="786.5">172</td>
                        <td></td>
                        <td>586</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>30-06-2017 11:36:38</td>
                        <td class="child_total">786.5 </td>
                        <td>Combine </td>
                        <td></td>
        </tr>
        <tr data-id="parent" class="parent_1494" onclick="show_lines(1494)" style="background-color: rgb(242, 222, 222);">
                        <td style="text-align:right;"><input type="checkbox" class="contactsepa" data-contact="1494" id="check0" data-mainprice="47.88" name="invoicearr[]" style="display:none" value="47.88"></td>
                        <td>Timmerman Stoffen</td>
                        <td></td>
                        <td>NL0000000000000000</td>
                        <td></td>
                        <td>090453-9</td>
                        <td></td>
                        <td class="parent_total">47.88 </td>
                        <td>Open Invoices </td>
                        <td><button type="button" class="openmodelsepa" data-target="1494">Edit</button></td>
            </tr>
            <tr data-id="child" class="child_1494" style="background-color: rgb(221, 221, 221); opacity: 0.5; display: none;">
                        <td style="text-align:right;"><input type="checkbox" class="contactsepa" data-contact="1494" id="check1" data-mainprice="47.88" name="invoicearr[]" style="display:block" value="47.88" disabled="disabled">1494</td>
                        <td></td>
                        <td>260</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>16-06-2017 12:00:00</td>
                        <td class="child_total">47.88 </td>
                        <td>Normal </td>
                        <td></td>
                        </tr><tr data-id="parent" class="parent_2314" onclick="show_lines(2314)" style="background-color: rgb(242, 222, 222);">

                        <td style="text-align:right;"><input type="checkbox" class="contactsepa" data-contact="2314" id="check0" data-mainprice="4362.9" name="invoicearr[]" style="display:none" value="4362.9"></td>
                        <td>Renmaart B.V.</td>
                        <td></td>
                        <td>NL0000000000000000</td>
                        <td></td>
                        <td>100332-1</td>
                        <td></td>
                        <td class="parent_total">4362.9 </td>
                        <td>Open Invoices </td>
                        <td><button type="button" class="openmodelsepa" data-target="2314">Edit</button></td>
            </tr>
    </tbody>
</table>

Answer 1

next方法仅为每个匹配的元素选择一个元素：紧跟其后的元素。

而是使用nextUntil并将条件从子项转换为父项：

$(attr).parents('tr').nextUntil('tr[data-id="parent"]') // ...etc

你实际上可以避免foreach循环，以及像这样的链选择器：

$('#table1 tr:has(.openmodelsepa)')
    .css('background-color','#f2dede')
    .nextUntil('tr[data-id="parent"]')
    .find('input[name="invoicearr[]"]')
    .prop('disabled', true);

请注意，在示例HTML中，第一行没有类openmodelsepa的后代，并且所有子tr元素都隐藏了样式display:none。

Answer 2

它可以帮助你......！

＆＃13;

$(document).ready(function() {
	$('[type="checkbox"]').prop('disabled', true)
    $('table td').has('button').next('td').find('[type="checkbox"]').prop('disabled', false);
});

＆＃13;

table, table td {border: solid 1px #ccc; border-collapse: collapse;}
table td {padding: 10px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td><button type="button">Button</button></td>
		<td><input type="checkbox" name=""></td>
		<td>More option here</td>
	</tr>
	<tr>
		<td></td>
		<td><input type="checkbox" name=""></td>
		<td>More option here</td>
	</tr>
	<tr>
		<td></td>
		<td><input type="checkbox" name=""></td>
		<td>More option here</td>
	</tr>
	<tr>
		<td><button type="button">Button</button></td>
		<td><input type="checkbox" name=""></td>
		<td>More option here</td>
	</tr>
</table>

＆＃13;

禁用具有按钮的特定tr的输入复选框

2 个答案: