Menu
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.
531
Conclusion. To disable clicking inside a div with CSS or JavaScript, we can set the pointer-events CSS property to none . Also, we can add a click event listener to the div and then call event. preventDefault inside.
If we want to disable our button after clicking on it, We can disable it by using react's state. We will set the button's disable state to false on load and add the onClick function in our button element, which will set the button's disable state to true .
The onclick event generally occurs when the user clicks on an element. It allows the programmer to execute a JavaScript's function when an element gets clicked. This event can be used for validating a form, warning messages and many more. Using JavaScript, this event can be dynamically added to any element.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
