javascript - Disabling the On-click Event

I have a table row which specifies an onclick event as follows.

onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"

And there are many table data in the table row and there are multiple rows as well.

Here my requirement is to disable this onclick event only on one table data but keep it active for the whole row.

Is there any was to disable the onclick event for only one table data.

Edit

Table shown below.

<html>
<head>

<script>
function dispStudRequest(val, val1)
{
    document.location.href="/student/Studentdetails.jsp?u_StudentID="+val+"&u_rollnoNumber="+val1;
}
</script>
</head>
<body>

<table>
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student1</td>

</tr>
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student2</td>

</tr>
</table>
</body>
</html>

And the onclick event needs to be disabled on first <td> which is a checkbox.

I have a table row which specifies an onclick event as follows.

onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"

And there are many table data in the table row and there are multiple rows as well.

Here my requirement is to disable this onclick event only on one table data but keep it active for the whole row.

Is there any was to disable the onclick event for only one table data.

Edit

Table shown below.

<html>
<head>

<script>
function dispStudRequest(val, val1)
{
    document.location.href="/student/Studentdetails.jsp?u_StudentID="+val+"&u_rollnoNumber="+val1;
}
</script>
</head>
<body>

<table>
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student1</td>

</tr>
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student2</td>

</tr>
</table>
</body>
</html>

And the onclick event needs to be disabled on first <td> which is a checkbox.

Share Improve this question edited Dec 8, 2015 at 1:47 asked Dec 8, 2015 at 1:30 david.colais 6192 gold badges10 silver badges17 bronze badges

Sure there is, but as you've left out just about all the HTML, we don't know what classes, id's or other attributes this row has ? – adeneo Commented Dec 8, 2015 at 1:33
@adeneo : Table sample added. – david.colais Commented Dec 8, 2015 at 1:47

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

You can assign a class that has the following rule:

.off { pointer-events: none; }

to any element rendering it unclickable.

Use a class to enable click when desired:

.on { pointer-events: auto; }

The snippet demonstrates this by entering a number 1 to 4 then off or on

function toggleTD(pos, state) {
  var anchors = document.querySelectorAll('a');
  var tgt = anchors[pos - 1];
  if (state === 'on') {
    tgt.classList.remove('off');
    tgt.classList.add('on');
  } else {
    tgt.classList.add('off');
    tgt.classList.remove('on');
  }
  return false;
}

var btn = document.getElementById('btn');

btn.addEventListener('click', function(event) {
  event.preventDefault();
  var inp1 = document.getElementById('inp1').value;
  var inp2 = document.getElementById('inp2').value;
  return toggleTD(inp1, inp2);
}, false);

body {
  width: 100vw;
  height: 100vh;
}
table {
  border: 1px solid #000;
  width: 80%;
  height: 50%;
}
td {
  border: 1px solid red;
}
a {
  width: 100%;
  height: 100%;
  font-size: 1em;
  text-align: center;
  padding-top: calc(50% - .5em);
  display: block;
}
.on {
  pointer-events: auto;
  background-color: green;
}
.off {
  pointer-events: none;
  background-color: red;
}
input {
  width: 2em;
  margin-top: 5px;
  padding: 0 3px;
  text-align: center;
}

<table>
  <tr>
    <td><a href="/">CLICK</a>
    </td>
    <td><a href="/">CLICK</a>
    </td>
    <td><a href="/">CLICK</a>
    </td>
    <td><a href="/">CLICK</a>
    </td>
  </tr>
</table>
<label>Position</label>
<input id="inp1">
<label>On/Off</label>
<input id="inp2">
<button id="btn">ToggleTD</button>

You could use onclick="return false" to disable clicks and oncontextmenu="return false" to disable right-clicks.

Eg.

<table onclick="return false" oncontextmenu="return false">
  <tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student1</td>
  </tr>
  <tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')">
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td>
    <td><img style="width="15" height="15"; <%=iSrc%>></td>
    <td>Student2</td>
  </tr>
</table>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Disabling the On-click Event - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)