I have the below code in my ASP (CLassic) page (part of a page with dozens of checkboxes set from the db):
<tr height="30px">
<td class="summarytext">Show Gender Pay Gap Options</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkDisplayGPGOptions" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
<td colspan="7"> </td>
<td>
<input type="button" class="help" align="left" id="Button3" onmousemove="javascript:DisplayHelp(150,-160, 10, 'HELP', 'Select if you want to exclude this pay type in netpay for attachment calculations.', this)" onmouseout="javascript:HideHelp()" WIDTH="16px" HEIGHT="16px">
</td>
<DIV id="divGPGOptiona" style="display:none">
<table>
<tr height="30px">
<td class="summarytext">Include Bonus in calculation for GPG reporting</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkIncludeBonusInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
</tr>
<tr height="30px">
<td class="summarytext">Include Gross Pay in calculation for GPG reporting</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkIncludeGrossPayInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
</tr>
</table>
</DIV>
</tr>
what I'd like to do is show and hide the DIV divGPGOptiona when the checkbox chkDisplayGPGOptions is checked...
Is there was some way of using just CSS for this, or will I need to do this with JavaScript and the DOM?
Create a class that represents "hide" state and toggle it when checkbox changes.
See how:
var checkbox = document.querySelector('input[name="check"]');
var div = document.querySelector('#container');
checkbox.addEventListener('change', function (e) {
if (div.classList.contains('is-hide')) {
div.classList.remove('is-hide');
} else {
div.classList.add('is-hide');
}
});
.is-hide {
display: none;
}
<input type="checkbox" name="check" />
<div id="container">Here goes the content.</div>
One possible solution is to toggle the display with JavaScript. You don't need jQuery for this. It can be done in native JavaScript.
var checkBox = document.getElementById("check-box");
var myDiv = document.getElementById("my-div");
myDiv.style.display = "none";
checkBox.addEventListener("click", function() {
if (myDiv.style.display == "none") {
myDiv.style.display = "block";
}
else {
myDiv.style.display = "none";
}
});
<div id="my-div">This is a div</div>
<p>The div above is hidden by default. Click the checkbox to toggle on and off</p>
<input id="check-box" type="checkbox" />
CSS Code:
.hidden{
display: none;
}
html Code:
<DIV id="divGPGOptiona" class="hidden" >
Jquery Code:
$(".checkbox").on('click',function(){
if($(".checkbox").prop("checked")){
$("#divGPGOptiona").removeClass("hidden");
}
else{
$("#divGPGOptiona").addClass("hidden");
}
});
Pure CSS using the siblings + selector.
So this can be done if you have the div as a sibling of the checkbox. In order for you to replicate, you would need to change your HTML structure. Which is advised, because you are placing a div inside a table row <tr>, without a table cell. Why?
.checkboxSibling {
display: none;
}
/*.checkbox:checked + .checkboxSibling {
display: block;
}*/
input[name="chkDisplayGPGOptions"]:checked + .checkboxSibling {
display: block;
}
<div>
Input 1 -
<input class="checkbox" name="chkDisplayGPGOptions" type="checkbox"/>
<div class="checkboxSibling">Checkbox Checked</div>
</div>
<div>
Input 2 -
<input class="checkbox" name="someOtherName" type="checkbox"/>
<div class="checkboxSibling">Checkbox Checked</div>
</div>
Related
I have an input and table like this :
<td valign="top" style = "padding: 12px 0px 0px 30px;" >
<div class="form-group">
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table style="display: none;">
<tr>
<td> apple </td>
</tr>
<tr>
<td> mango </td>
</tr>
<tr>
<td> carrot </td>
</tr>
</table>
</div>
</td>
I want to unhide "apple" link when the user types "app" on input and unhide "mango" link when user types "man" and so on.. I have googled this problem but I couldn't find anything satisfying. What kind of JavaScript code do I need to achieve this? Thanks.
You could do something like this:
Start by mapping each row of the table in an object (where the key is the text content of the row and the value is the row itself) so that you can quickly access it later. Then add an event listener to the input and when the user types something in go through the object seeing if any of its properties match the value, using the object to show/hide the elements.
let element, elements, i, input, n, tableBody;
elements = {};
tableBody = document.getElementById(`table-body`);
for (i = tableBody.children.length - 1; i > -1; i--) {
element = tableBody.children[i];
elements[element.textContent.trim()] = element;
}
input = document.getElementById(`inputlg`);
input.addEventListener(`input`, filterElements);
function filterElements() {
let key, value;
value = input.value;
for (key in elements) {
if (key.match(value)) {
elements[key].classList.add(`show`);
} else {
elements[key].classList.remove(`show`);
}
}
}
#table-body >* {
display: none;
}
.show {
display: block !important;
}
<td valign="top" style = "padding: 12px 0px 0px 30px;" >
<div class="form-group">
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table>
<tbody id="table-body">
<tr>
<td>
apple
</td>
</tr>
<tr>
<td>
mango
</td>
</tr>
<tr>
<td>
carrot
</td>
</tr>
</tbody>
</table>
</div>
</td>
You can achieve this by writing little more code as below.
$("#inputlg").keyup(function() {
var value = $(this).val();
console.log(value);
if (value == 'app') {
$('.app').attr('style', 'display:block');
} else {
$('.app').attr('style', 'display:none');
}
if (value == 'mon') {
$('.mon').attr('style', 'display:block');
} else {
$('.mon').attr('style', 'display:none');
}
if (value == 'car') {
$('.car').attr('style', 'display:block');
} else {
$('.car').attr('style', 'display:none');
}
})
Note:- I have just added class in particular anchor tag for your help.
Adding code snippet for same.
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table >
<tr>
<td>
apple
</td>
</tr>
<tr >
<td>
mango
</td>
</tr>
<tr class="car" style="display:none">
<td>
carrot
</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#inputlg").keyup(function() {
var value = $(this).val();
console.log(value);
if (value == 'app') {
$('.app').attr('style', 'display:block');
} else {
$('.app').attr('style', 'display:none');
}
if (value == 'mon') {
$('.mon').attr('style', 'display:block');
} else {
$('.mon').attr('style', 'display:none');
}
if (value == 'car') {
$('.car').attr('style', 'display:block');
} else {
$('.car').attr('style', 'display:none');
}
})
})
</script>
</body>
</html>
There are multiple checkboxes with same id, in asp.net repeater control. User can select either email or phone against each record in repeater rows.
In following example; there are two rows, if you select the email icon in first row then it ticks relavent checkbox which is fine but if you tick the email icon on the next row then it will untick the first row checkbox instead of ticking the one next to it.
$(function() {
$("[id*=divchkemail]").click(function() {
$(this).toggleClass("image-email");
if ($('#chkemail').prop('checked')) {
$("#chkemail").prop('checked', false);
} else {
if ($('#chkphone').prop('checked')) {
$("#chkphone").prop('checked', false);
$("#divchkphone").toggleClass("image-phone");
}
$("#chkemail").prop('checked', true);
}
});
$("[id*=divchkphone]").click(function() {
$(this).toggleClass("image-phone");
if ($('#chkphone').prop('checked')) {
$("#chkphone").prop('checked', false);
} else {
if ($('#chkemail').prop('checked')) {
$("#chkemail").prop('checked', false);
$("#divchkemail").toggleClass("image-email");
}
$("#chkphone").prop('checked', true);
}
});
});
.image-phone-disabled {
background-image: url('http://i.imgur.com/74FcgdS.png');
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-phone {
background-image: url(http://i.imgur.com/LwsHkOt.png);
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-email-disabled {
background-image: url('http://i.imgur.com/khd2NG8.png');
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-email {
background-image: url(http://i.imgur.com/y5KE9jx.png);
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" />
</td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<span>
</span>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" />
</td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
</td>
</tr>
</table>
<span>
</span>
JSFiddle
http://jsfiddle.net/g8Xuz/48/
although you must use unique id's for elements, given your scenario I've written down this fiddle.
i've used this $(this).parent().next('td').find('input:checkbox'); to find the checkboxes
please try this http://jsfiddle.net/g8Xuz/50/
This works.
I gave the rows a class of contact. It can also work without the class on the rows by using $("table > tr") instead. No need to know the exact class names and can handle any number of sets allowing the correct unique IDs for the fields.
FIDDLE
$(function () {
$(".contact").on("click", function (e) {
var $div = $(this).find("div"); // the div on the clicked row
var divClass = $div.prop("class"); // its class
var $checkbox = $(this).find("input"); // the checkbox
var check = $checkbox.is(":checked"); // whether or not it is checked
if (e.target.type != "checkbox") { // we clicked somewhere else
check = !check; // toggle
$checkbox.prop("checked", check); // set the check
}
if (check) { // are we enabling?
if (divClass.indexOf("disabled") != -1) { // disabled?
$div.removeClass(divClass).addClass(divClass.replace("-disabled", ""));
}
}
else { // disable it
$div.removeClass(divClass).addClass(divClass + "-disabled");
}
var $otherContact=$(this).siblings("tr"); // the sibling row
if (check) {
$div = $otherContact.find("div");
divClass=$div.prop("class");
if (divClass.indexOf("disabled") == -1) {
$div.removeClass(divClass).addClass(divClass+"-disabled");
}
$checkbox=$otherContact.find("input"); // the checkbox
if ($checkbox.is(":checked")) $checkbox.prop("checked",false);
}
});
});
It's happening because you are selecting element by id and which is duplicate. You have to find your required element traversing up through its ancestors in the DOM tree so that selector only select elements within current row by setting a area of elements. Here is working code.
$(function () {
$("[id*=divchkemail]").click(function (e) {
var currentRow = $(e.target).parents().closest('table');
$(this).toggleClass("image-email");
if ($(currentRow).find('#chkemail').prop('checked')) {
$(currentRow).find('#chkemail').prop('checked', false);
}
else {
var chkPhoneInCurrentRow = $(currentRow).find('#chkphone')
var divchkInCurrentRow = $(currentRow).find('#divchkphone')
if ($(chkPhoneInCurrentRow).prop('checked')) {
$(chkPhoneInCurrentRow).prop('checked', false);
$(divchkInCurrentRow).toggleClass("image-phone");
}
$(currentRow).find('#chkemail').prop('checked', true);
}
});
$("[id*=divchkphone]").click(function (e) {
var currentRow = $(e.target).parents().closest('table');
$(this).toggleClass("image-phone");
if ($(currentRow).find('#chkphone').prop('checked')) {
$(currentRow).find('#chkphone').prop('checked', false);
}
else {
var chkEmailInCurrentRow = $(currentRow).find('#chkemail')
var divchkInCurrentRow = $(currentRow).find('#divchkemail')
if ($(chkEmailInCurrentRow).prop('checked')) {
$(chkEmailInCurrentRow).prop('checked', false);
$(divchkInCurrentRow).toggleClass("image-email");
}
$(currentRow).find('#chkphone').prop('checked', true);
}
});
});
.image-phone-disabled {
background-image:url('http://i.imgur.com/74FcgdS.png');
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-phone {
background-image:url(http://i.imgur.com/LwsHkOt.png);
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-email-disabled {
background-image:url('http://i.imgur.com/khd2NG8.png');
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-email {
background-image:url(http://i.imgur.com/y5KE9jx.png);
background-repeat:no-repeat ;
width:34px;
height:34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" /> </td>
<td> <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<span>
</span>
<table border=0>
<tr>
<td><div id="divchkemail" class="image-email-disabled" /></td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
</td>
</tr>
<tr>
<td><div id="divchkphone" class="image-phone-disabled" /></td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
</td>
</tr>
</table>
<span>
</span>
Here is working fiddle.
http://jsfiddle.net/hannnan/noukkjsq/
This is happening because you are using the same IDs for everything - the JS cannot differentiate between the two rows. So you click the second row's icon, the first element it finds with your ID (#divchkemail) it performs the action on, which is in the first row.
Below is my HTML and jQuery code. jQuery displays the hidden elements, except for the #image4 and #video4 elements, which stay hidden with if I select image or video. All the other elements get displayed correctly.
Any idea why those two won't show?
JS:
$(document).ready(function(){
var fields = jQuery('#image_type');
var select = this.value;
fields.change(function () {
if ($(this).val() == 'image') {
alert($(this).val());
$('#images_pop_up').show();
$('#video1').hide();
$('#video2').hide();
$('#video3').hide();
$('#video4').hide();
$('#image1').show();
$('#image2').show();
$('#image3').show();
$('#image4').show();
$(' #image5').show();
}
else {
$('#images_pop_up').show();
$('#image1').hide();
$('#image2').hide();
$('#image3').hide();
$('#image4').hide();
$('#image5').hide();
$('#video1').show();
$('#video2').show();
$('#video3').show();
$('#video4').show();
$('#image5').show();
}
});
});
HTML:
<div id ="images_pop_up" style="display:none;">
<span id="image1" style="display:none;" ><img src="/uploads/commerce/images/large/easton-163135-wheeled-bag.jpg" border="0" alt="easton-163135-wheeled-bag.jpg" title=" easton-163135-wheeled-bag.jpg " class="productimage"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Nice bag</span>
<span id ="video1" style="display:none;"></span></td>
<td class="textSmall" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<span id="image3" style="display:none;"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><input type="hidden" name="products_previous_image_lrg_caption" value="Nice bag"></span>
<span id ="video3"><input type="hidden" name="products_previous_video_embed"><input type="hidden" name="products_previous_video_embed_caption"></span>
<td class="textSmall" valign="top"><span id="image4" style="display:none;">New Image File: <input type="text" name="products_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Image Caption: <input type="text" name="products_image_lrg_caption" value="Nice bag"></span>
<span id ="video4" style="display:none;">Video Embed field: <input type="text" name="products_video_embed"><br>Video Image Caption: <input type="text" name="products_video_embed_caption"></span>
</td>
<td><span id="image5" style="display:none;"> </span></td>
</tr>
<tr>
<td colspan="2">
<div id='div_img_lrg'></div>
</td>
</tr>
</table>
</td>
</div>
What sticks out most to me is that you're copy pasting when you could be putting CSS to work for you by giving them all the same class (or the appropriate groups of elements the same class at least) and then hiding and showing them based on that.
Your bug is probably caused by a slight typo somewhere in the selectors or the place where you're setting the ids in the markup.
try like this
$(document).ready(function () {
var fields = jQuery('#image_type');
var select = this.value;
$('#image_type').change(function () {
if ($(this).val() == 'image') {
alert($(this).val());
$("[id^=image]").show();
$("[id^=video]").hide();
} else {
$("[id^=video]").show();
$("[id^=image]").hide();
}
});
});
<div>
<input type="radio" name="check" value="cash" checked/>cash
<input type="radio" name="check" value="credit" />credit
</div>
<table>
<tbody id="cash">
<tr>
<td>
Cash User name:
</td>
<td>
<input type="text" name="cash1" />
</td>
</tr>
</tbody>
<tbody id="credit">
<tr>
<td>
credit User name:
</td>
<td>
<input type="text" name="credit1" />
</td>
</tr>
</tbody>
</table>
In the div tag I am having two radio buttons. By default I have made the radio button named cash checked now. What I want is that when radio button cash is checked tbody with id cash is shown and tbody with id credit hidden and when radio button with name credit is checked then tbody with id credit is shown and other tbody to be hidden. I have done it with jQuery but I want it to do with Javascript.
If you are willing to go for a pure CSS solution, than you have to get rid of the div around your radio buttons
Demo
tbody {
display: none;
}
input[value="cash"]:checked + input[value="credit"] + table tbody[id="cash"] {
display: table-row-group;
}
input[value="credit"]:checked + table tbody[id="credit"] {
display: table-row-group;
}
Note: Just make sure you declare some class and make these selectors
specific, else it will target all the elements in the above
combination in the document.
Here is the Javascript code, to be written after the HTML:
var radios = document.getElementsByName("check");
for( var i = 0; i < radios.length; i++){
switch( radios[i].value){
case "cash":
radios[i].onclick = function(){
document.getElementById("credit").style.display = 'none';
document.getElementById("cash").style.display = 'block';
};
break;
case "credit":
radios[i].onclick = function(){
document.getElementById("cash").style.display = 'none';
document.getElementById("credit").style.display = 'block';
};
break;
}
if( radios[i].checked){
radios[i].click();
}
}
The code is running at http://jsfiddle.net/2sPGn/
Javascript Code
<script>
function showData(obj) {
if ( obj.value == "cash") {
document.getElementById("cash").style.display = '';
document.getElementById("credit").style.display='none';
} else {
document.getElementById("cash").style.display = 'none';
document.getElementById("credit").style.display='';
}
}
</script>
HTML
<div>
<input type="radio" name="check" value="cash" onclick='showData(this);' checked/>cash
<input type="radio" name="check" value="credit" onclick='showData(this);' />credit
</div>
<table>
<tbody id="cash">
<tr>
<td>Cash User name:</td>
<td>
<input type="text" name="cash1" />
</td>
</tr>
</tbody>
<tbody id="credit" style='display:none'>
<tr>
<td>credit User name:</td>
<td>
<input type="text" name="credit1" />
</td>
</tr>
</tbody>
</table>
I think this will help you :
$(document).ready(function(){
$('#cash,#credit').hide();
$('input[type=radio]').change(function(){
$('#'+$(this).attr('value')).show();
});
});
I have a table in which there are checkboxes, some checkboxes are disabled. I want to add an onclick attribute to all disabled checkboxes using JavaScript or jQuery.
HTML
<table class="docs_table" id="myTable2">
<tr id="node-22" class="disabled_element">
<td title="Document can't be selected.">
<input type="checkbox" name="docs" id="/root/docname" value="/root/docname" disabled />
</td>
</tr>
<tr id="node-23" class="">
<td title="">
<input type="checkbox" name="docs" id="/root/docname2" value="/root/docname2" />
</td>
</tr>
<tr id="node-24" class="disabled_element">
<td title="Document can't be selected.">
<input type="checkbox" name="docs" id="/root/docname3" value="/root/docname3" disabled />
</td>
</tr>
</table>
In above code the docname input box should get below as onclick.
onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname'};return false;"
and docname3 should get the below
onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname3'};return false;"
What I tried
$('table tr td input[type="checkbox"]').each(function () {
if ($( this ).prop('disabled')) {
$( this ).closest('tr').addClass('lineThrough');
$( this ).attr('onClick','onclick="javascript:if(confirm('Press OK to confirm')){ document.location='/pathtoscript?command=dosomething&name=docname'};return false;"');
}
});
But it doesn't work, and also I wonder how to deal with different docname because in onclick statement name=docname will be different for each input box.
Fiddle
I did it using this answer.
<table class="docs_table" id="myTable2">
<tr id="node-22" class="disabled_element">
<td title="Document is being edited by someone.">
<div style="display:inline-block; position:relative;">
<input type="checkbox" name="docs" id="/root/docname" value="/root/docname" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</td>
</tr>
<tr id="node-23" class="child">
<td title="">
<input type="checkbox" name="docs" id="/root/docname2" value="/root/docname2" />
</td>
</tr>
<tr id="node-22" class="disabled_element">
<td title="Document is being edited by someone.">
<div style="display:inline-block; position:relative;">
<input type="checkbox" name="docs" id="/root/docname3" value="/root/docname3" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</td>
$('table tr td input[type="checkbox"] + div').each(function () {
if ($(this).prev('input[disabled]')) {
$(this).closest('tr').addClass('lineThrough');
$(this).click(function () {
if (confirm('Press OK to confirm')) {
var docname = $(this).prev('input[disabled]').prop('value');
docname = docname.substring(docname.lastIndexOf('/') + 1);
document.location = '/pathtoscript?command=dosomething&name=' + docname;
}
});
}
});
Disabled elements don't generate mouse events. So basically what I did is added a div around the disabled inputs and added some JS to match it.
JSFiddle
In case, it is not possible for you to change your existing HTML structure and want to perform the action on click of the closest <td> element, please use the below code.
Javascript (jQuery)
$(document).ready(function(){
$('table tr td input[type="checkbox"]').each(function () {
if ($( this ).prop('disabled')) {
$( this ).closest('tr').addClass('lineThrough');
var valStr = $(this).val();
$( this ).closest('td').attr('onClick', 'clickFn("'+valStr+'");');
//console.log($( this ).closest('td').attr('onClick'));
}});
});
function clickFn(valStr){
if(confirm('Press OK to confirm')){
valStr = valStr.substring(valStr.lastIndexOf('/') + 1);
newHref = '/pathtoscript?command=dosomething&name=' +valStr;
//console.log(newHref);
document.location = newHref;
}
}
Demo