Specific row for table click event disable and enable jquery

Question

For security specific row with condition need to disable click event. Table is being loaded by ajax callback. But need to disable specific row. Here is the sample code that doesn't working.

 <table id="result-table" class="table table-striped table-bordered tbl-paper-theme table-paper" role="grid" aria-describedby="datatable_info">

    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
                Amount
            </th>
            <th>
                Action
            </th>
        </tr>

    </thead>
    <tbody id="result-tbody">
        <tr>
            <td>Mushroom Soup</td>
            <td>1</td>
            <td>180</td>
            <td>180.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="421" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Caesar's Salad (Larg)</td>
            <td>1</td>
            <td>345</td>
            <td>345.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="480" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

For specific row I mean row number two I have tried to disable by given below code like : datatable is loaded dynamically by ajax $("#result-table result-tbody tr:eq(1)").prop('disabled', true);

stackoverflow.com/questions/7899453/…

toor
– toor

2018-03-14 06:28:13 +00:00
Commented Mar 14, 2018 at 6:28 — toor
– toor, Commented Mar 14, 2018 at 6:28

sethuraman · Accepted Answer · 2018-03-14 06:33:00Z

0

We can do this in css. Try the following code

#result-tbody tr:nth-child(2) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

Above code will block the entire tr. If you want to block certain elements inside the tr go on with appropriate selectors.

answered Mar 14, 2018 at 6:33

sethuraman

18911 bronze badges

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

2 Comments

python gbs Over a year ago

thanks for ur reply. but it has to be dynamic for some condition basis so i can't do that. like say if a condition arise row 1 has to be clickable but others not. in that case what can i do? i wanna control it by dynamic.

sethuraman Over a year ago

you can add a classname to that row and add the css to that class.

Suresh Ponnukalai · Accepted Answer · 2018-03-14 07:08:25Z

<tr> does not have any property called disabled. If you want to hide the row, you have to apply the display property none to the element like below.

$("#result-table #result-tbody tr:eq(1)").css("display","none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result-table" class="table table-striped table-bordered tbl-paper-theme table-paper" role="grid" aria-describedby="datatable_info">

    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
                Amount
            </th>
            <th>
                Action
            </th>
        </tr>

    </thead>
    <tbody id="result-tbody">
        <tr>
            <td>Mushroom Soup</td>
            <td>1</td>
            <td>180</td>
            <td>180.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="421" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Caesar's Salad (Larg)</td>
            <td>1</td>
            <td>345</td>
            <td>345.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="480" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

EDIT:

You don't want to hide the rows but you want to disabled click event on the elements for the specific row, then you can use the following code.

$("#result-table #result-tbody tr:eq(0)").find("*").prop("disabled", "disabled");

The above code will disabled all the elements inside the first row(input, select, button, textarea....). eq(0) will target the first row of the table. Look at the following snippet, I have added the click event on both the rows, but for the first one we have disabled it using jquery.

$("#result-table #result-tbody tr:eq(0)").find("*").prop("disabled", "disabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result-table" class="table table-striped table-bordered tbl-paper-theme table-paper" role="grid" aria-describedby="datatable_info">

    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
                Amount
            </th>
            <th>
                Action
            </th>
        </tr>

    </thead>
    <tbody id="result-tbody">
        <tr>
            <td>Mushroom Soup</td>
            <td>1</td>
            <td>180</td>
            <td>180.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="421" onclick="alert('test one');" title="Del"><i class="icon-remove"></i>One</button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Caesar's Salad (Larg)</td>
            <td>1</td>
            <td>345</td>
            <td>345.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button onclick="alert('test two');" class="btn btn-danger btn-sm ordered-qty-del" id="480" title="Del"><i class="icon-remove"></i>Two</button>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

no i don't want to hide/show. i want to click event disable/enable on specific row. how can i do that. thanks for ur reply.

Collectives™ on Stack Overflow

Specific row for table click event disable and enable jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related