Select All Check Boxes By group - javascript

first group : Agen LPG 3KG
second group : Office HRG
I want to select a checkbox based on the group, but at this time when I click on group one then group two should be selected when I click on group one then group one is checked, why is it selected only in the last loop?
my code in index.blade.php
#foreach ($business_unit as $group => $unit)
<tr>
<td colspan='5' style='font-weight: bold'>{{ $group }} #if ($group == '') Unit Bisnis Lainnya #endif</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="{{$group}}" onclick="toggle(this);"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
#foreach ($unit as $item)
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check" id="{{$group}}" name="employee_id[]" value="{{ $item->employee_id }}">
<td class='captial'>{{ $item->name }}</td>
<td class='captial'>{{ $item->position ?? '-' }}</td>
</tr>
#endforeach
#endforeach
Here is the javascript for this
<script>
function toggle(source) {
var business_id = $(this).data('business-id');
var checkboxes = document.querySelectorAll('input[id="{{$group}}"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
</script>
how to solve my problem please help me.


You only have ONE input[id="{{$group}}" so it will only ever do that one.
Instead delegate (and remove onclick="toggle(this);") and use the data attributes you already have:
I assume the table has id="tableID" and you need to change the checkbox to class="emp-check {{$group}}"
document.getElementById("tableID").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches("[data-business-id]")) return // or use a class
const business_id = tgt.dataset.businessId; // the business-id becomes businessId
const checked = tgt.checked;
document.querySelectorAll(`input.${business_id}`).forEach(chk => chk.checked = checked)
})
<table id="tableID">
<tr>
<td colspan='5' style='font-weight: bold'>group 1</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group1"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 1">
<td class='captial'>G1 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 2">
<td class='captial'>G1 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 3">
<td class='captial'>G1 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
<tr>
<td colspan='5' style='font-weight: bold'>group 2</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group2"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 1">
<td class='captial'>G2 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 2">
<td class='captial'>G2 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 3">
<td class='captial'>G2 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
</table>

Related

iCheck checkbox becomes unclickable after applying pagination

I am trying to create pagination for dynamic tables with data from the database. What I did was, I loaded first all the records and paginated the result. The pagination is working, however, the checkbox becomes unclickable.
I'm guessing it's because of how I stored all the trs into an array to display it.
HTML
Buttons
<div class="btn-group float-right">
<button class="btn btn-white btn-sm btn-prev"><i class="fa fa-arrow-left"></i></button>
<button class="btn btn-white btn-sm btn-next"><i class="fa fa-arrow-right"></i></button>
</div>
Table
<table class="table table-hover table-mail">
<tbody>
<?php
if(!empty($mails)){
foreach($mails as $key) {
$isRead = ($key['isRead'] == 0) ? "unread" : "read";
$isImportant = ($key['isImportant'] == 1) ? "<span class='float-left text-warning important'><i class='fa fa-star'></i></span>" : "";
?>
<tr class="<?php echo $isRead; ?>" data-id="<?php echo $key['mailID']; ?>">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact"><?php echo $isImportant; ?> <?php echo ucwords(strtolower($guiClass->e($key['name']))); ?></td>
<td class="mail-subject"><?php echo mb_strimwidth(ucfirst($guiClass->e($key['subject'])), 0, 60, "..."); ?></td>
<td class="text-right mail-date"><?php echo time_passed(date(strtotime($key['created_at']))); ?></td>
</tr>
<?php }}else{ ?>
<tr>
<td class="text-center">No Messages</td>
</tr>
<?php } ?>
</tbody>
</table>
JS
<script>
$(document).ready(function(){
$(".i-checks").iCheck({
checkboxClass: "icheckbox_square-green",
radioClass: "iradio_square-green",
});
// Pagination
var current_page = 1;
var records_per_page = 10;
var records = $(".table-mail").find("tbody").find("tr").length;
var data = [];
$(".mail-box")
.find("table")
.find("tbody")
.find("tr")
.each(function () {
data.push($(this).prop("outerHTML"));
});
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function numPages() {
return Math.ceil(records / records_per_page);
}
function changePage(page) {
var table = $(".table-mail").find("tbody");
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
table.html("");
for (
var i = (page - 1) * records_per_page;
i < page * records_per_page;
i++
) {
table.append(data[i]);
}
}
$(".btn-next").click(function () {
nextPage();
});
$(".btn-prev").click(function () {
prevPage();
});
changePage(1);
});
</script>
EDIT
Based on some comments, reinitializing iCheck is the way to go. But it is still not working (at least in my current code).
For testing purposes, I tried hardcoding trs using the code below and used this to append to the tbody, and it worked. I also added the reinitialization of iCheck in this test.
for (var i = 0; i < records; i++) {
tr[i] =
"<tr class='read' data-id='" +
i +
"'><td class='check-mail'><input type='checkbox' class='i-checks mail' autocomplete='off'></td><td class='mail-contact'><a href='mail_detail.php?id=1'> John Doe</a></td><td class='mail-subject'><a href='mail_detail.php?id=1'>This is a subject " +
i +
"</a></td><td class='text-right mail-date'>2 hours ago</td></tr>";
}
So, just like my first guess, I think the problem lies in how I get all the trs and stored them in array called data, and displayed it back.
Any suggestions on how should I properly get all the trs?

As pointed out by the guys in the comments you've to reinitialize the icheck components after the pagination, so better to add the code below at the end of the changePage function :
$(document).ready(function() {
// Pagination
var current_page = 1;
var records_per_page = 10;
var records = $(".table-mail").find("tbody").find("tr").length;
var data = [];
$(".mail-box")
.find("table")
.find("tbody")
.find("tr")
.each(function() {
data.push($(this).prop("outerHTML"));
});
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function numPages() {
return Math.ceil(records / records_per_page);
}
function changePage(page) {
var table = $(".table-mail").find("tbody");
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
table.html("");
for (
var i = (page - 1) * records_per_page; i < page * records_per_page; i++
) {
table.append(data[i]);
}
$(".i-checks").iCheck({
checkboxClass: "icheckbox_square-green",
radioClass: "iradio_square-green",
});
}
$(".btn-next").click(function() {
nextPage();
});
$(".btn-prev").click(function() {
prevPage();
});
changePage(1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet" />
<div class="mail-box">
<div class="btn-group float-right">
<button class="btn btn-white btn-sm btn-prev"><i class="fa fa-arrow-left"></i></button>
<button class="btn btn-white btn-sm btn-next"><i class="fa fa-arrow-right"></i></button>
</div>
<table class="table table-hover table-mail">
<tbody>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
</tbody>
</table>
</div>

Jquery: Select all check boxes when 'select all' is checked

I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.
Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).
Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):
checked = true;
$(".all").click(function() {
checked = !checked;
var selectid = this.id.replace(/ /g, '');
console.log("====>>>" + selectid);
var item = `${selectid}-item`;
console.log("===<<<" + item)
var checkElements = $(`.${selectid}-item`).prop('checked', checked);
$(selectid + "-item").prop('checked', !checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

I had to normalise your classes. They were not consistent. Don't have spaces in IDs (I got rid of the ID from all)
and do not have spaces between classNames that mean something when taken together
const checkAll = () => {
$(".all").each(function() {
const subClass = $(this).data("class");
const $sub = $("." + subClass+"-item");
$(this).prop("checked", $sub.length === $sub.filter(":checked").length)
})
};
$(function() {
checkAll(); //on load
$(".all").on("click", function() {
const $sub = $("." + $(this).data("class")+"-item");
const checked = this.checked;
$sub.prop('checked', checked);
})
$(".item").on("click", checkAll)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>

html table with colspan - adjacent cell problems

I have the below table format . I want to implement jquery functionality when the user click on cell of Row1 of this table.
I want to merge or split the cell based on the user action.
Say , the user click on "7-8" then it has to split into two different cells like 7 and 8 with proper data.
Say , the user click on "2" then the nearest left cell has to be get merged and form a cell like "1-2" with proper data. (As given in "7-8").
Same way if he click on "4" then it should create "3-4" with proper data .
Here Row2 and Row5 cells span for 2 columns in case of merge.(Please see the existing table).
I am trying to implement this by changing the colspan values but it is not viable.
Please suggest a cleaner solution.
<table border=1 style="height:200px; border-top:0px;">
<tbody id="MySettings">
<tr>
<td width="15%">Row1</td>
<td colspan="0" width="10%">1</td>
<td colspan="0" width="10%">2<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="0" width="10%">3</td>
<td colspan="0" width="10%">4<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
<td colspan="0" width="10%">5</td>
<td colspan="0" width="10%">6<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
<td colspan="2" width="10%">7 - 8<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
</tr>
<tr id="MySettings_2">
<td>Row2</td>
<td colspan="0"> <input type="checkbox" name="CheckBox1" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox2" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox3" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox4" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox5" value="1" checked="true"></td>
<td colspan="0"> <input type="checkbox" name="CheckBox6" value="1" checked="true"></td>
<td colspan="2"> <input type="checkbox" name="CheckBox7_8" value="1" checked="true"></td>
</tr>
<tr id="Row3">
<td>Row3</td>
<td>88.98</td>
<td>33.98</td>
<td>43.34</td>
<td>123.98</td>
<td>0</td>
<td>65.43</td>
<td>33.19</td>
<td>27.8</td>
</tr>
<tr id="Row4">
<td>Row4</td>
<td>101</td>
<td>340</td>
<td>555.8</td>
<td>21</td>
<td>0</td>
<td>56</td>
<td>456</td>
<td>10</td>
</tr>
<tr id="Row5">
<td>Row5</td>
<td colspan="0">7</td>
<td colspan="0">3</td>
<td colspan="0">6</td>
<td colspan="0">0</td>
<td colspan="0">0</td>
<td colspan="0"> 4</td>
<td colspan="2">10</td>
</tr>
</tbody>
</table>
Thanks

JSfiddle Link
$("#MySettings tr:first-child .col2").click(function() {
if($(this).attr("colspan") == "0") {
$(this).attr("colspan", "2");
$(this).prev().css("display","none");
$(this).text("1-2");
}
else {
$(this).attr("colspan", "0");
$(this).text("2");
$(this).prev().css("display","table-cell");
}
});
Hope above Link help you. :)

Javascript to Disable checkboxes in a table with variable rows

I have a table which can have variable # of rows. how can I disable all checkboxes at once?
<table border="1" class="myTable grid">
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td><input type="checkbox" name="cb1;1" value="1"></td>
</tr>
<td>2</td>
<td><input type="checkbox" name="cb2;1" value="1" checked></td>
</tr>
<tr align="center">
</table>

Here is a javascript only solution that disables all checkboxes in myTable.
document.getElementByClassName("myTable").querySelectorAll("input[type='checkbox']").disabled = true;

A jQuery solution would be:
$('.myTable input[type=checkbox]').attr('disabled', 'disabled');
Alternatively:
document.querySelectorAll('.myTable input[type=checkbox]').disabled = true;

Try utilizing a for loop to iterate NodeList returned by document.querySelectorAll(selectors) , set each [type=checkbox] element to disabled within for statement
var inputs = document.querySelectorAll("[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
<table border="1" class="myTable grid">
<tbody>
<tr align="center">
<td> </td>
<td>A</td>
</tr>
<tr align="center">
<td>1</td>
<td>
<input type="checkbox" name="cb1;1" value="1">
</td>
</tr>
<td>2</td>
<td>
<input type="checkbox" name="cb2;1" value="1" checked>
</td>
</tr>
<tr align="center">
</tbody>
</table>

Calculate the sum of products using a td attribute

I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)

For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/

Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);

Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.

Categories

Resources