Question

如何在除一行中的一个单元格之外的所有网格单元格上禁用click？当单元格进入编辑模式时，我试图禁用网格中任何单元格的单击。所以我试过了：

$('#QCStatus tr td').bind('click',function() {
        return false;
});

//QCStatus is the id of the grid

要启用单击某个单元格，在正在编辑的同一行中，我尝试了：

$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
        return true;
});

但是，由于第一个代码段禁用了点击，因此没有任何效果。实现这一目标的正确方法是什么？

Answer 1

您可以在此处使用:not()排除所选行：

$('#QCStatus tr:not(.selected) td').on('click', function(e) {
  $('pre').prepend('event :::: '+e.type+'\n');
  return false;
});

.selected{background:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
  <tr><td>click</td></tr>
  <tr class='selected'><td>click</td></tr>
  <tr><td>click</td></tr>
  <tr><td>click</td></tr>
</table>

<pre></pre>

这会绑定所有td的点击，而tr.selected不是td[aria-describedby="QCStatus_ActionIcons"]的孩子。

根据您的评论，您可以添加更多内容：

如何排除所选行$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) { $('pre').prepend('event :::: '+e.type+'\n'); return false; });中的td？

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:background="#ff7c2b"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ScrollView
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:fillViewport="true"
        xmlns:android="http://schemas.android.com/apk/res/android">


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 1!"
                android:id="@+id/textView"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 2!"
                android:id="@+id/textView2"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 3!"
                android:id="@+id/textView3"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 4!"
                android:id="@+id/textView4"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 5!"
                android:id="@+id/textView5"

                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 6!"
                android:id="@+id/textView6"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 7!"
                android:id="@+id/textView7"

                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 8!"
                android:id="@+id/textView8"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 9!"
                android:id="@+id/textView9"

                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 10!"
                android:id="@+id/textView10"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 11!"
                android:id="@+id/textView11"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 12!"
                android:id="@+id/textView12"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 13!"
                android:id="@+id/textView13"
                android:background="#00BBFF"/>

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="This is textView 14!"
                android:id="@+id/textView14"
                android:background="#00BBFF"/>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

Answer 2

使用event.stoppropagation()取消click事件的元素。它可以防止当前事件的进一步传播。

$('tr').on('click', function() {
  console.log('clicked!');
});
$('.disabled').on('click', function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>

</table>

Fiddle here

Answer 3

将“禁用”属性添加到要禁用点击的按钮。

对于div disabled属性不起作用。

在这些情况下使用“pointer-events：none;”在你特定div的css中。

当单元格进入编辑模式时，禁用单击除一个单元格（在所选行中）之外的任何位置

3 个答案: