How do I enable all rows if one disabled row is present. I have a 2 kinds of buttons inside my table. First button, when you click it, it enables all the disabled buttons. The Second button, when you click it, it enables/disables the specific row it is assigned to.
HTML
<tr class="${fn:substring(monthInfo.month, 0, 3)}">
<c:if test="${stat.first}">
<td class="monthName" rowspan="6" value="${fn:substring(monthInfo.month, 0, 3)}">
<div class="vertical-text">
${fn:substring(monthInfo.month, 0, 3)}<br>
<img src="resources/images/edit.png" width="20%" href="#" />
</div>
</td>
</c:if>
<td><img class="editButt" src="resources/images/edit.png" href="#" /></td>
<td>${weekInfo.weekStart}</td>
<td>${weekInfo.weekEnd}</td>
<c:forEach items="${weekInfo.weeklyData}" var="week">
<td><input type="text" name="cell" class="hours" maxlength="2" value="${week}"></td>
</c:forEach>
<td class="weekTotal ibm-bgcolor-green-10 ">${weekInfo.totalHrs}</td>
<td class="holidayTotal">${weekInfo.totalHo}</td>
<td class="vacationTotal">${weekInfo.totalVl}</td>
<td class="sickTotal">${weekInfo.totalSl}</td>
<td><input type="text" name="cell" class="remarks" value="${weekInfo.remarks}"></td>
</tr>
jQuery
$('.editButt').click(function() {
$(this).closest('tr').find('input:text').prop('disabled', function(i, v) {
return !v;
});
});
$('.monthName').click(function() {
$("#test1table tbody tr").each(function() {
var className = $(this).closest('tr').find('td:first').text().trim();
var value = $('.' + className).find('input:text').is(':disabled');
if (!value) {
disableRows();
} else {
$('.' + className).find('input:text').prop('disabled', function(i, v) {
return !v;
});
}
});
});
What happens here is that if 2 rows are enabled. When I click the, the 1st button(.monthName). The 2 rows are enabled becomes disabled, and the disabled rows becomes enabled.
But I want is when I click the 1st Button. Regardless of there attribute, all rows will be enabled.
But I want is when I click the 1st Button. Regardless of there attribute, all rows will be enabled.
Enable all button
$("#enable-all").click(function(e) {
$("table").removeClass("disabled");
$("tbody tr").removeClass("danger");
$("table input, table button").prop("disabled", false);
});
Disable all button
$("#disable-all").click(function(e) {
$("table").addClass("disabled");
$("tbody tr").addClass("danger");
$("table input, table button").prop("disabled", true);
});
or a toggle button
$("#toggle").click(function(e) {
$("table").toggleClass("disabled");
$("tbody tr").toggleClass("danger");
var isDisabled = $("table").hasClass("disabled");
if (isDisabled) {
$("table input, table button").prop("disabled", true);
} else {
$("table input, table button").prop("disabled", false);
}
});
jsfiddle
Related
On the view of my ASP.NET MVC 5 Application, I have two tables, Each row in the tables has a checkbox which is dynamically generated.
I am trying to add Check All / Uncheck All functionality for both the tables.
Following are two checkboxes:
<input id="ALL" class="CheckAll" type="checkbox" value="All" /><b>Select / Unselect All</b>
<input id="ALLt2" class="CheckAllt2" type="checkbox" value="All" /><b>Select / Unselect All</b>
Following is the relevant HTML Code:
<table class="table" id="hostsTable">
<thead>
<tr>
<th>FQ</th>
<th>Name</th>
<th>Select?</th>
</tr>
</thead>
<tr>
<td>
VISIBLE FQ VALUE
</td>
<td>
VISIBLE NAME
</td>
<td>
<input Style="vertical-align:3px}" data-val="true" data-val-required="The Checked field is required." id="Hosts_0__Checked" name="Hosts[0].Checked" type="checkbox" value="true" /><input name="Hosts[0].Checked" type="hidden" value="false" />
</td>
</tr>
</table>
The Structure of both the table is same and ID of second one is countersTable
Following is my jQuery:
$('.CheckAll').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#hostsTable tr input:checkbox:not(".CheckAll")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAll').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAll)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAll').prop('checked', true);
}
});
$('.CheckAllt2').on('change', function () {
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
});
//$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
$('#countersTable tr input:checkbox:not(".CheckAllt2")').on('change', function () {
if (!this.checked) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', false);
}
var flag = true;
$(this).parent().parent().children().find('input[type=checkbox]:not(.CheckAllt2)').each(function () {
if (!this.checked) {
flag = false;
}
});
if (flag) {
$(this).parent().parent().find('.CheckAllt2').prop('checked', true);
}
});
When I click on either of the Select / Unselect All checkbox, the checkboxes from both the tables get Checked / Unchecked.
How Can I restrict this to respective tables?
Thanks In Advance
I assume that you select the wrong element when calling $.parent().parent(). If you grab an element that both tables are children of, all input[type="checkbox"] will be selected, obviously.
Since you have different classes for both checkboxes, try to instead of selecting by $.parent().parent(), just using the # id selector for the relevant table.
I.e. change this:
$(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
to
$("#hostsTable").find('input[type=checkbox]').prop('checked', this.checked);
for the first table, and with #counterTable for the second one.
I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.
just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function
Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>
My issue is if you select any of the check box (payee) - another rows with same column checkboxes should be be disable/enabled.
Issue #1: I am unable to disable/enable the check boxes on first select. But working on second click if you select any checkbox.
Issue #2: If I load the page again the value with check box which is previously checked is showing as disable with checked. I need it disable with unchecked.
Below is my code:
function onPayeeChkChange() {
jQuery(document).ready(function() {
$('#tblHousehold tr td#tdpayee input:checkbox').click(function(){
var $inputs = $('#tblHousehold tr td#tdpayee input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
});
});
}
I am not sure what I have missed.
Is this what you are looking for?
Note: if you disable a checkbox, you will not be able to re-use it afterwards. If you must disable it, just add .prop('disabled', true) within the loop.
$(function () {
$(':checkbox').click(function () {
var input = $(this), td = input.closest('td'), table = td.closest('table');
// get index of the cell relative to its parent row
var i = td.index();
// loop through each row
$('tr', table).each(function () {
// uncheck the row's ith cell's checkbox
$('td:eq(' + i + ') :checkbox', this).not(input).prop('checked', false);
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox">
</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
I want to get value of radio in table using click event.Note , get value of radio in column
<table id="div_table" width="500px" border="2px" cellpadding="2" cellspacing="2" >
<tr>
<td >Column Name1</td>
<td>Column Name2</td>
<td >Column Name3</td>
</tr>
<tr >
<td >PN1</td>
<td ><input type="radio" name="RD_CHECK" value="ABC">ABC</td>
<td ></td>
</tr>
<tr >
<td >PX2</td>
<td ><input type="radio" name="RD_CHECK" value="XYZ">XYZ <input type="radio" name="RD_CHECK" value="CBA">CBA</td>
<td ><input type="radio" name="RD_CHECK" value="123">123 <input type="radio" name="RD_CHECK" value="456">456</td>
</tr>
</table>
Ok , Example: I check radio of column2 but it not work.
$(document).ready(function ()
{
$('body').on('click','#div_table tbody tr', function ()
{
if ($("input[type='radio']").is(':checked') == true && $(this).find('td:eq')==1)
{
//value of radio in Column2
alert('This is Column 2 and value = '+$("input:checked").val());
}
else
{
// value of radio in Column3
alert('This is Column 3 and value = '+$("input:checked").val());
}
});
});
Give me advised.Thank guys.
$("input[type='radio']").is(':checked') == true Will get the checked property of only the first matching <input>. If your first radio isn't checked, this fails.
$(this).find('td:eq') == 1 Will always be true since even a jQuery constructor with no matches returns an object (truthy value).
Instead, attach the event to the radio buttons themselves. You can get the column by finding the .index() of the .closest() <td>. To get the value simply use the context of your event:
$(document).ready(function () {
$('body').on('click', '#div_table tr :radio', function () {
var col = $(this).closest('td').index();
alert('This is Column ' + col + ' and value = ' + this.value);
});
});
JSFiddle
I have a table where each row contains document name and there's a checkbox at the start of each row. Some checkboxes are disabled. I want to add text-decoration:line-through to that row so that user can easily identify that, that row can't be selected because checkbox is disabled. How can this be done using JavaScript or jQuery?
In below example the row with Doc name 2 should be line-through.
<tr>
<td>
<input type="checkbox" name="doclist" id="someId" value="someId" onchange="updateList('someId')">Doc name 1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="doclist" id="AnotherId" value="AnotherId" onchange="updateList('AnotherId')" disabled>Doc name 2
</td>
</tr>
I tried the below.
$('input[type="checkbox"]').filter(function() {
var disabledRow = this.disabled;
disabledRow.addClass("lineThrough");
});
CSS
.lineThrough{
text-decoration:line-through;
}
DEMO
$('table tr td input[type="checkbox"]').each(function(){
if($(this).prop('disabled')){
$(this).parents('tr').css('text-decoration','line-through');
}
});
if you want to work with class
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).parents('tr').addClass('lineThrough');
}
});
As Suggested by UweB
.closest('tr') is faster than .parents('tr')
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).closest('tr').addClass('lineThrough');
}
});
$('input[type="checkbox"]:disabled').parent().addClass('lineThrough');