Disable the input checkbox for particular tr which have button

Question

I want to disabled the input checkbox which parents is red and has data-id="parent". Actually there are many rows but in which the BIC code is absent i have checked for that and show as red. When we click on the parent row the child row is expand by default it not display. I have tried lots of time but not succeed, Here is the screenshots what i want for:

Image2

This is my code which i have tried:

$('#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 like that:

<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>

instead of travesing over your tr elements just find tr with data-id='parent' and then find it's first child i.e. td and just disable checkbox within that td element — Chaitanya Ghule
– Chaitanya Ghule, Commented Aug 25, 2017 at 9:02
No i dont wanna only first child i want all the childs of that parent. — Anand Pandey
– Anand Pandey, Commented Aug 25, 2017 at 9:04
All your child rows are hidden (style display: none;), so what is the purpose? — trincot
– trincot, Commented Aug 25, 2017 at 9:15

trincot · Accepted Answer · 2017-08-25 09:31:52Z

1

The next method only selects one element per matched element: the one that immediately follows it.

Instead use nextUntil and invert the condition from child to parent:

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

You can in fact avoid foreach loops, and chain selectors like this:

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

Note that in the example HTML the first row does not have a descendant with class openmodelsepa, and also all child tr elements are hidden with a style display:none.

edited Aug 25, 2017 at 9:31

answered Aug 25, 2017 at 9:20

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anand Pandey Over a year ago

Its not woring :(

trincot Over a year ago

I used your HTML, and it works in this snippet: jsfiddle.net/hcsrk3kx. Note that the first child is excluded because the very first row does not have the required .openmodelsepa element.

Anand Pandey Over a year ago

the next() working fine. When the next each loop begin find() is select first and disabled it not the second third or so on

trincot Over a year ago

Please check the fiddle and tell me what is different in your code.

trincot Over a year ago

"the next() working fine ... not the second third or so on": so it is actually not working fine, which is what I explain in my answer. nextUntil acts on all the next children, if you change the selector.

|

Rohit Sharma · Accepted Answer · 2020-09-08 07:01:44Z

Disable the checkboxes by finding them in the tds that do not have buttons

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

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

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

table td {
  padding: 10px;
}

<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>

Collectives™ on Stack Overflow

Disable the input checkbox for particular tr which have button

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related