How to hide table row has unchecked input using jquery

Question

I'm trying to do a filter that when a button pressed it will show only the row has checked input in the table.

<table class="table">
    <tr>
        <th>Name</th>
        <th>InUse</th>
        <th></th>
    </tr>
    <tr>
        <td>foo 1</td>
        <td>
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td>
            <a href="/AdditivesNames/Edit/5">Edit</a> |
            <a href="/AdditivesNames/Details/5">Details</a> |
            <a href="/AdditivesNames/Delete/5">Delete</a>
        </td>
    </tr>
    <tr>
        <td>foo 2</td>
        <td>
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td>
            <a href="/AdditivesNames/Edit/3">Edit</a> |
            <a href="/AdditivesNames/Details/3">Details</a> |
            <a href="/AdditivesNames/Delete/3">Delete</a>
        </td>
    <tr/>
    <!-- not checked -->
    <tr>
        <td>foo 3</td>
        <td>
            <input class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td>
            <a href="/AdditivesNames/Edit/5">Edit</a> |
            <a href="/AdditivesNames/Details/5">Details</a> |
            <a href="/AdditivesNames/Delete/5">Delete</a>
        </td>
    </tr>
</table>

Mohammad · Accepted Answer · 2016-07-12 11:52:14Z

2

You can use :has selector or .has() method to checking existence of element in parent.

$("button").click(function(){
    $("table tr").has(".check-box:not(:checked)").hide();
});

table, tr, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Name</th>
        <th>InUse</th>
    </tr>
    <tr>
        <td>foo 1</td>
        <td>
            <input class="check-box" type="checkbox" checked disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 2</td>                  
        <td>
            <input class="check-box" type="checkbox" disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 3</td>                  
        <td>
            <input class="check-box" type="checkbox" checked disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 4</td>                  
        <td>
            <input class="check-box" type="checkbox" disabled  />
        </td>
    </tr>
</table>
<button>Only checked</button>

You can test code on full of you html in demo

answered Jul 12, 2016 at 11:52

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

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

3 Comments

Mohammad Over a year ago

@Yogi_Bear What is meaning of doen't work? Do you checked jsfiddle? It Both of code work in demo

Yogi_Bear Over a year ago

no, I tried it on my own web app, and it didnt work. I guess it's because of the asp.net

Mohammad Over a year ago

@Yogi_Bear Use $(document).on("click", "button", function(){}) instead

Rahul Patel · Accepted Answer · 2016-07-12 12:26:19Z

0

Please use following jquery code. Onclick of submit button all the rows with unchecked checkboxes will be hide.

$(document).ready(function(){
    $("input[type=submit]").click(function () {
        $("input:not(:checked)").each(function () {
            $(this).closest('tr').hide();           
        });
    });
});

answered Jul 12, 2016 at 12:26

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

1 Comment

Anburaj_N Over a year ago

i want to disable a table row which contain a checkbox if its unchecked how do i disable it

Naveen Chandra Tiwari · Accepted Answer · 2016-07-12 12:34:03Z

0

Please use jquery and place this code in your tag

  $(document).ready(function () {
    $("#btnClick").on("click", function () {
        $(".table tr").each(function () {
            if (!$(this).find("td input:checkbox").is(":checked")) {
                $(this).hide();
            }
        })
    })
});

This should work with your case.

answered Jul 12, 2016 at 12:34

Naveen Chandra Tiwari

5,1333 gold badges22 silver badges27 bronze badges

1 Comment

Naveen Chandra Tiwari Over a year ago

@Anburaj_N can you show me in html? I'll help you, if still not fixed

pushkin · Accepted Answer · 2018-11-14 15:36:43Z

0

This is a much simpler approach. Pass this to the onclick() event handler in your HTML and use jQuery:

<input type="checkbox" onClick="disablerow(this);">

function disablerow(el) {
    if (el.checked == true) {
        $(el).closest('tr').find(":input:text(:first)").attr('disabled', false);
    }
    else {
        $(el).closest('tr').find(":input:text(:first)").attr('disabled', true);
    }     
}

edited Nov 14, 2018 at 15:36

pushkin

10.4k16 gold badges65 silver badges112 bronze badges

answered Nov 14, 2018 at 15:15

james

511 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to hide table row has unchecked input using jquery

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related