Question

对于具有条件的安全特定行，需要禁用click事件。表由ajax回调加载。但需要禁用特定行。以下是不起作用的示例代码。

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

对于特定的行，我的意思是我试图禁用的第二行给出以下代码： datatable由ajax动态加载 $（＆＃34;＃result-table result-tbody tr：eq（1）＆＃34;）。prop（＆＃39; disabled＆＃39;，true）;

Answer 1

<tr>没有任何名为disabled的属性。如果要隐藏该行，则必须将display属性none应用于如下所示的元素。

$("#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>

修改

您不想隐藏行，但想要在特定行的元素上禁用click事件，然后您可以使用以下代码。

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

上面的代码将禁用第一行内的所有元素（input，select，button，textarea ....）。 eq(0)将定位到表格的第一行。看看下面的代码片段，我在两个行上添加了click事件，但对于第一个，我们使用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>

Answer 2

我们可以在css中这样做。请尝试以下代码

#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;
}

以上代码将阻止整个tr。如果你想阻止tr中的某些元素继续使用适当的选择器。

表单击事件的特定行禁用并启用jquery

2 个答案: